generated from nhcarrigan/template
48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import type { Resource } from "@elysium/types";
|
|
import { formatNumber } from "../../utils/format.js";
|
|
|
|
interface ResourceBarProps {
|
|
resources: Resource;
|
|
prestigeCount: number;
|
|
profileUrl: string;
|
|
}
|
|
|
|
export const ResourceBar = ({ resources, prestigeCount, profileUrl }: ResourceBarProps): React.JSX.Element => (
|
|
<header className="resource-bar">
|
|
<div className="resource">
|
|
<span className="resource-icon">🪙</span>
|
|
<span className="resource-value">{formatNumber(resources.gold)}</span>
|
|
<span className="resource-label">Gold</span>
|
|
</div>
|
|
<div className="resource">
|
|
<span className="resource-icon">✨</span>
|
|
<span className="resource-value">{formatNumber(resources.essence)}</span>
|
|
<span className="resource-label">Essence</span>
|
|
</div>
|
|
<div className="resource">
|
|
<span className="resource-icon">💎</span>
|
|
<span className="resource-value">{formatNumber(resources.crystals)}</span>
|
|
<span className="resource-label">Crystals</span>
|
|
</div>
|
|
<div className="resource">
|
|
<span className="resource-icon">🔮</span>
|
|
<span className="resource-value">{formatNumber(resources.runestones)}</span>
|
|
<span className="resource-label">Runestones</span>
|
|
</div>
|
|
{prestigeCount > 0 && (
|
|
<div className="prestige-badge">
|
|
⭐ Prestige {prestigeCount}
|
|
</div>
|
|
)}
|
|
<a
|
|
className="profile-link-button"
|
|
href={profileUrl}
|
|
rel="noreferrer"
|
|
target="_blank"
|
|
title="View your public profile"
|
|
>
|
|
👤 Profile
|
|
</a>
|
|
</header>
|
|
);
|