53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { Coins, Gift } from "lucide-react";
|
||
|
|
import { useSessionStore } from "@/lib/session-store";
|
||
|
|
import { useUIStore } from "@/lib/ui-store";
|
||
|
|
import { useI18n } from "@/lib/i18n";
|
||
|
|
import { avatarEmoji } from "@/lib/online/types";
|
||
|
|
|
||
|
|
export function TopBar() {
|
||
|
|
const profile = useSessionStore((s) => s.profile);
|
||
|
|
const go = useUIStore((s) => s.go);
|
||
|
|
const openDaily = useUIStore((s) => s.openDaily);
|
||
|
|
const { t } = useI18n();
|
||
|
|
if (!profile) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex items-center justify-between gap-3">
|
||
|
|
<button
|
||
|
|
onClick={() => go("profile")}
|
||
|
|
className="glass rounded-full ltr:pr-4 rtl:pl-4 ltr:pl-1.5 rtl:pr-1.5 py-1.5 flex items-center gap-2 hover:bg-navy-800/80 transition"
|
||
|
|
>
|
||
|
|
<span className="size-9 rounded-full bg-navy-900 gold-border flex items-center justify-center text-xl">
|
||
|
|
{avatarEmoji(profile.avatar)}
|
||
|
|
</span>
|
||
|
|
<span className="text-start leading-tight">
|
||
|
|
<span className="block text-sm font-bold text-cream max-w-24 truncate">
|
||
|
|
{profile.displayName}
|
||
|
|
</span>
|
||
|
|
<span className="block text-[10px] text-gold-400/80">
|
||
|
|
{t("common.level")} {profile.level}
|
||
|
|
</span>
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<button
|
||
|
|
onClick={openDaily}
|
||
|
|
className="glass rounded-full p-2 hover:bg-navy-800/80 transition"
|
||
|
|
title={t("daily.title")}
|
||
|
|
>
|
||
|
|
<Gift className="size-4 text-gold-400" />
|
||
|
|
</button>
|
||
|
|
<div className="glass rounded-full px-3 py-1.5 flex items-center gap-1.5">
|
||
|
|
<Coins className="size-4 text-gold-400" />
|
||
|
|
<span className="text-sm font-bold text-cream tabular-nums">
|
||
|
|
{profile.coins.toLocaleString()}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|