Header Nav Glass

1// ========================================
2// HEADER NAV GLASS COMPONENT
3// Navigation header with search and theme toggle
4// ========================================
5 
6import { forwardRef, type CSSProperties } from "react";
7import { Github, Sun, Moon, Palette } from "lucide-react";
8import { cn } from "@/lib/utils";
9import { useTheme, type ThemeName } from "@/lib/theme-context";
10import { ButtonGlass } from "../ui/button-glass";
11import { SearchBoxGlass } from "../atomic/search-box-glass";
12import "@/glass-theme.css";
13 
14const themes: ThemeName[] = ["light", "aurora", "glass"];
15 
16const themeConfig: Record<ThemeName, { label: string; icon: typeof Sun }> = {
17  light: { label: "Light", icon: Sun },
18  aurora: { label: "Aurora", icon: Moon },
19  glass: { label: "Glass", icon: Palette },
20};
21 
22export interface HeaderNavGlassProps extends React.HTMLAttributes<HTMLElement> {
23  readonly username?: string;
24  readonly onSearch?: (value: string) => void;
25  readonly onThemeToggle?: () => void;
26}
27 
28export const HeaderNavGlass = forwardRef<HTMLElement, HeaderNavGlassProps>(
29  ({ username = "Yhooi2", onSearch, onThemeToggle, className, ...props }, ref) => {
30    const { theme, cycleTheme } = useTheme();
31 
32    const nextTheme = themes[(themes.indexOf(theme) + 1) % themes.length];
33    const NextIcon = themeConfig[nextTheme].icon;
34 
35    const headerStyles: CSSProperties = {
36      background: "var(--header-bg)",
37      borderColor: "var(--header-border)",
38      backdropFilter: "blur(var(--blur-md))",
39      WebkitBackdropFilter: "blur(var(--blur-md))",
40    };
41 
42    const iconBtnStyles: CSSProperties = {
43      background: "linear-gradient(135deg, var(--icon-btn-from), var(--icon-btn-to))",
44      boxShadow: "var(--icon-btn-shadow)",
45    };
46 
47    const themeBtnStyles: CSSProperties = {
48      background: "var(--card-subtle-bg)",
49      border: "1px solid var(--card-subtle-border)",
50    };
51 
52    return (
53      <header
54        ref={ref}
55        className={cn("border rounded-xl py-2 px-3 md:py-3 md:px-4 transition-all duration-300", className)}
56        style={headerStyles}
57        {...props}
58      >
59        <div className="flex items-center justify-between">
60          <div className="flex items-center gap-2 md:gap-4">
61            <button
62              className="w-8 h-8 md:w-10 md:h-10 rounded-xl flex items-center justify-center transition-all duration-300 hover:scale-105"
63              style={iconBtnStyles}
64              type="button"
65              aria-label="GitHub"
66            >
67// … truncated