Spaces:
Sleeping
Sleeping
File size: 4,541 Bytes
7ff860b | 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 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | import { Link, useLocation, useNavigate } from "react-router-dom";
import { Activity, Users, AlertTriangle, LogOut, Brain } from "lucide-react";
import { useAuth } from "@/contexts/AuthContext";
import { useProfile } from "@/hooks/useProfile";
import { XP_PER_LEVEL, xpInLevel, isNightMode } from "@/lib/engine";
import { Button } from "@/components/ui/button";
const tabs = [
{ to: "/", label: "Dashboard", icon: Activity },
{ to: "/social", label: "Social", icon: Users },
{ to: "/emergency", label: "Emergency", icon: AlertTriangle },
];
export default function AppHeader() {
const location = useLocation();
const navigate = useNavigate();
const { user, signOut } = useAuth();
const { profile } = useProfile();
const xp = profile?.total_xp ?? 0;
const level = profile?.level ?? 1;
const inLevel = xpInLevel(xp);
const pct = Math.min(100, (inLevel / XP_PER_LEVEL) * 100);
return (
<>
{isNightMode() && (
<div className="bg-gradient-danger/10 border-b border-warning/30 text-warning text-xs text-center py-2 font-medium">
🌙 Blue Light Alert — past 10pm. Wind down to protect tomorrow's focus.
</div>
)}
<header className="sticky top-0 z-40 glass-strong border-b border-border/50">
<div className="container flex items-center justify-between gap-4 py-3">
<Link to="/" className="flex items-center gap-2 group">
<div className="relative">
<Brain className="h-7 w-7 text-primary" />
<div className="absolute inset-0 blur-lg bg-primary/40 group-hover:bg-primary/60 transition-all" />
</div>
<span className="font-display text-xl font-bold tracking-tight">
Distract<span className="text-gradient-emerald">IQ</span>
</span>
</Link>
<nav className="hidden md:flex items-center gap-1 glass rounded-full p-1">
{tabs.map((t) => {
const active = location.pathname === t.to;
const Icon = t.icon;
return (
<Link
key={t.to}
to={t.to}
className={`flex items-center gap-2 px-4 py-1.5 rounded-full text-sm font-medium transition-all ${
active
? "bg-primary text-primary-foreground glow-emerald"
: "text-muted-foreground hover:text-foreground"
}`}
>
<Icon className="h-4 w-4" />
{t.label}
</Link>
);
})}
</nav>
<div className="flex items-center gap-3">
{user && profile && (
<div className="hidden sm:flex flex-col items-end min-w-[140px]">
<div className="flex items-center gap-2 text-xs">
<span className="font-mono text-primary">L{level}</span>
<span className="text-muted-foreground">{profile.username}</span>
</div>
<div className="w-32 h-1.5 bg-muted rounded-full overflow-hidden mt-1">
<div
className="h-full bg-gradient-emerald transition-all duration-500"
style={{ width: `${pct}%` }}
/>
</div>
<span className="text-[10px] text-muted-foreground mt-0.5 font-mono">
{inLevel}/{XP_PER_LEVEL} XP
</span>
</div>
)}
{user ? (
<Button variant="ghost" size="icon" onClick={signOut} aria-label="Sign out">
<LogOut className="h-4 w-4" />
</Button>
) : (
<Button onClick={() => navigate("/auth")} variant="default" size="sm">
Sign in
</Button>
)}
</div>
</div>
{/* Mobile nav */}
<nav className="md:hidden flex items-center justify-around border-t border-border/40 py-2">
{tabs.map((t) => {
const active = location.pathname === t.to;
const Icon = t.icon;
return (
<Link
key={t.to}
to={t.to}
className={`flex flex-col items-center gap-1 text-xs ${active ? "text-primary" : "text-muted-foreground"}`}
>
<Icon className="h-4 w-4" />
{t.label}
</Link>
);
})}
</nav>
</header>
</>
);
}
|