header-4

1"use client";
2import {
3  Building2,
4  CalendarDays,
5  ChevronRight,
6  Gem,
7  Github,
8  LayoutGrid,
9  LineChart,
10  RefreshCw,
11  Search,
12  TrendingUp,
13  Wallet,
14} from "lucide-react";
15import { AnimatePresence, motion } from "motion/react";
16import React from "react";
17import { LogoIcon } from "@/components/logo";
18import { MenuToggleIcon } from "@/components/menu-toggle-icon";
19import { Button } from "@/components/ui/button";
20import {
21  NavigationMenu,
22  NavigationMenuContent,
23  NavigationMenuItem,
24  NavigationMenuLink,
25  NavigationMenuList,
26  NavigationMenuTrigger,
27} from "@/components/ui/navigation-menu";
28import { useScroll } from "@/hooks/use-scroll";
29import { cn } from "@/lib/utils";
30 
31export function Header() {
32  const scrolled = useScroll(20);
33  const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
34 
35  return (
36    <header
37      className={cn(
38        "sticky top-0 z-50 w-full transition-all duration-300",
39        scrolled
40          ? "border-b bg-background/80 backdrop-blur-xl"
41          : "bg-transparent"
42      )}
43    >
44      <div className="container mx-auto flex h-16 items-center justify-between px-4">
45        {/* Logo */}
46        <div className="flex items-center gap-8">
47          <a
48            className="group flex items-center gap-2 rounded-md p-2 transition-colors hover:bg-accent"
49            href="/"
50          >
51            <LogoIcon className="size-7 transition-transform group-hover:scale-110" />
52            <span className="hidden font-bold text-xl tracking-tight sm:inline-block">
53              Freddy
54            </span>
55          </a>
56 
57          {/* Desktop Navigation */}
58          <NavigationMenu className="hidden md:flex" viewport={false}>
59            <NavigationMenuList className="gap-2">
60              <NavigationMenuItem>
61                <a
62                  className="group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 font-medium text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50"
63                  href="#"
64                >
65                  Home
66                </a>
67              </NavigationMenuItem>
68              <NavigationMenuItem>
69                <a
70// … truncated