File size: 2,606 Bytes
945aae0 | 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 | import { AnimatePresence, motion } from "framer-motion";
import { Moon, Sun, Sparkles, LayoutGrid, Bell } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useAutoHideHeader } from "@/hooks/useAutoHideHeader";
interface HeaderProps {
mode: "night" | "day";
onToggleMode: () => void;
onOpenDrawer: () => void;
onRegenerate: () => void;
onNotify: () => void;
}
export function Header({ mode, onToggleMode, onOpenDrawer, onRegenerate, onNotify }: HeaderProps) {
const visible = useAutoHideHeader(60, 3000);
return (
<>
{/* invisible top hover strip ensures reveal works even when chrome is hidden */}
<div className="fixed top-0 left-0 right-0 h-16 z-40 pointer-events-none" aria-hidden />
<AnimatePresence>
{visible && (
<motion.header
initial={{ y: -60, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
exit={{ y: -60, opacity: 0 }}
transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
className="fixed top-4 left-1/2 -translate-x-1/2 z-50"
>
<div className="glass-strong rounded-full px-4 py-2 flex items-center gap-2">
<div className="flex items-center gap-2 pr-2 border-r border-white/10">
<div className="w-7 h-7 rounded-full bg-gradient-to-br from-primary to-accent grid place-items-center">
<Sparkles className="w-3.5 h-3.5 text-primary-foreground" />
</div>
<span className="text-sm font-semibold tracking-wide">Qmetaram <span className="text-gradient">QHub</span></span>
</div>
<Button variant="ghost" size="sm" onClick={onOpenDrawer} className="rounded-full">
<LayoutGrid className="w-4 h-4" />
<span className="hidden sm:inline ml-1">Modules</span>
</Button>
<Button variant="ghost" size="sm" onClick={onRegenerate} className="rounded-full">
<Sparkles className="w-4 h-4" />
<span className="hidden sm:inline ml-1">New Sky</span>
</Button>
<Button variant="ghost" size="sm" onClick={onNotify} className="rounded-full">
<Bell className="w-4 h-4" />
</Button>
<Button variant="ghost" size="sm" onClick={onToggleMode} className="rounded-full">
{mode === "night" ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
</Button>
</div>
</motion.header>
)}
</AnimatePresence>
</>
);
}
|