| 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> |
| </> |
| ); |
| } |
|
|
