67 lines
4.2 KiB
TypeScript
67 lines
4.2 KiB
TypeScript
import { useQuery } from '@tanstack/react-query';
|
|
import { rommApiClient } from '../api/client';
|
|
import { useInputMode } from '../context/InputModeContext';
|
|
|
|
export const TopNav = () => {
|
|
const { mode } = useInputMode();
|
|
|
|
const { data: stats } = useQuery({
|
|
queryKey: ['stats'],
|
|
queryFn: () => rommApiClient.fetchStats(),
|
|
staleTime: 60000, // 1 minute caching
|
|
});
|
|
|
|
const formatBytes = (bytes?: number) => {
|
|
if (!bytes) return '--';
|
|
const gb = bytes / (1024 * 1024 * 1024);
|
|
if (gb >= 1024) return `${(gb / 1024).toFixed(1)} TB`;
|
|
return `${Math.round(gb)} GB`;
|
|
};
|
|
return (
|
|
<header className="fixed top-0 right-0 left-64 h-16 z-50 bg-[#10131f]/80 backdrop-blur-2xl flex items-center justify-between px-12 border-b border-white/5">
|
|
<div className="flex items-center gap-6 w-full">
|
|
<div className="relative flex-1 max-w-md focus-within:ring-1 focus-within:ring-[#2563eb]/50 rounded-full overflow-hidden bg-[#070913] border border-white/5 transition-all outline-none shadow-inner">
|
|
<span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[#c3c6d7] text-sm">search</span>
|
|
<input className="w-full bg-transparent border-none pl-10 pr-4 py-2 text-[11px] font-bold tracking-widest uppercase text-white placeholder-[#c3c6d7]/50 focus:ring-0 geist-mono outline-none" placeholder="Search the vault..." type="text"/>
|
|
</div>
|
|
|
|
<div className="hidden xl:flex items-center gap-6 ml-4 geist-mono justify-end flex-1">
|
|
<div className="flex items-center gap-2">
|
|
<span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="account_tree">account_tree</span>
|
|
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.PLATFORMS ?? '--'}</span> Platforms</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="sports_esports">sports_esports</span>
|
|
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.ROMS?.toLocaleString() ?? '--'}</span> Games</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="hard_drive">hard_drive</span>
|
|
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{formatBytes(stats?.TOTAL_FILESIZE_BYTES)}</span></span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="save">save</span>
|
|
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.SAVES?.toLocaleString() ?? '--'}</span> Saves</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="history">history</span>
|
|
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.STATES?.toLocaleString() ?? '--'}</span> States</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="photo_library">photo_library</span>
|
|
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.SCREENSHOTS?.toLocaleString() ?? '--'}</span> Screens</span>
|
|
</div>
|
|
|
|
<div className="w-px h-4 bg-white/10 mx-2"></div>
|
|
|
|
{/* Active Hardware Indicator */}
|
|
<div className="flex items-center justify-center w-8 h-8 bg-white/5 border border-white/5 rounded-full ring-1 ring-white/10 shadow-inner text-[#2563eb]" title={mode === 'gamepad' ? 'Gamepad Active' : 'Mouse/Keyboard Active'}>
|
|
<span className="material-symbols-outlined text-[16px]" style={{ fontVariationSettings: "'FILL' 1" }}>
|
|
{mode === 'gamepad' ? 'sports_esports' : 'mouse'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|