Spaces:
Sleeping
Sleeping
File size: 3,500 Bytes
80d8c84 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | import { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { FlaskConical, LayoutDashboard, Play, Sun, Moon, Volume2, VolumeX, HelpCircle, GitCompareArrows, GraduationCap, BrainCircuit } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useTheme } from '@/lib/useTheme';
import { toggleMute, isMuted } from '@/lib/audio';
const navItems = [
{ to: '/', label: 'Dashboard', icon: LayoutDashboard },
{ to: '/episode', label: 'Episode', icon: Play },
{ to: '/training', label: 'Training', icon: GraduationCap },
{ to: '/compare', label: 'Compare', icon: GitCompareArrows },
{ to: '/policies', label: 'Policies', icon: BrainCircuit },
];
export default function Header({ onShowTutorial }: { onShowTutorial?: () => void }) {
const location = useLocation();
const { theme, toggleTheme } = useTheme();
const [muted, setMuted] = useState(isMuted());
function handleToggleMute() {
const newVal = toggleMute();
setMuted(newVal);
}
return (
<header className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-sm">
<div className="mx-auto flex h-14 max-w-screen-2xl items-center gap-6 px-4">
<Link to="/" className="flex items-center gap-2 font-semibold text-primary">
<FlaskConical className="h-5 w-5" />
<span>ReplicaLab</span>
</Link>
<nav className="flex items-center gap-1">
{navItems.map(({ to, label, icon: Icon }) => {
const active = location.pathname === to || (to !== '/' && location.pathname.startsWith(to));
return (
<Link
key={to}
to={to}
className={cn(
'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm transition-colors',
active
? 'bg-primary/10 text-primary font-medium'
: 'text-muted-foreground hover:text-foreground hover:bg-muted',
)}
>
<Icon className="h-4 w-4" />
{label}
</Link>
);
})}
</nav>
<div className="ml-auto flex items-center gap-1.5">
<span className="mr-2 text-xs text-muted-foreground hidden sm:inline">OpenEnv Hackathon</span>
{onShowTutorial && (
<button
onClick={onShowTutorial}
className="rounded-md border border-border p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
title="Show tutorial"
>
<HelpCircle className="h-4 w-4" />
</button>
)}
<button
onClick={handleToggleMute}
className="rounded-md border border-border p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
title={muted ? 'Unmute sounds' : 'Mute sounds'}
>
{muted ? <VolumeX className="h-4 w-4" /> : <Volume2 className="h-4 w-4" />}
</button>
<button
onClick={toggleTheme}
className="rounded-md border border-border p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
>
{theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
</button>
</div>
</div>
</header>
);
}
|