header-3

1"use client";
2import {
3  BarChart,
4  CodeIcon,
5  FileText,
6  GlobeIcon,
7  Handshake,
8  HelpCircle,
9  LayersIcon,
10  Leaf,
11  type LucideIcon,
12  PlugIcon,
13  RotateCcw,
14  Shield,
15  Star,
16  UserPlusIcon,
17  Users,
18} from "lucide-react";
19import React from "react";
20import { createPortal } from "react-dom";
21import { LogoIcon } from "@/components/logo";
22import { MenuToggleIcon } from "@/components/menu-toggle-icon";
23import { Button } from "@/components/ui/button";
24import {
25  NavigationMenu,
26  NavigationMenuContent,
27  NavigationMenuItem,
28  NavigationMenuLink,
29  NavigationMenuList,
30  NavigationMenuTrigger,
31} from "@/components/ui/navigation-menu";
32import { useScroll } from "@/hooks/use-scroll";
33import { cn } from "@/lib/utils";
34 
35type LinkItem = {
36  title: string;
37  href: string;
38  icon: LucideIcon;
39  description?: string;
40};
41 
42export function Header() {
43  const [open, setOpen] = React.useState(false);
44  const scrolled = useScroll(10);
45 
46  React.useEffect(() => {
47    if (open) {
48      document.body.style.overflow = "hidden";
49    } else {
50      document.body.style.overflow = "";
51    }
52    return () => {
53      document.body.style.overflow = "";
54    };
55  }, [open]);
56 
57  return (
58    <header
59      className={cn("sticky top-0 z-50 w-full border-transparent border-b", {
60        "border-border bg-background/95 backdrop-blur-lg supports-backdrop-filter:bg-background/50":
61          scrolled,
62      })}
63    >
64      <nav className="mx-auto flex h-14 w-full max-w-5xl items-center justify-between px-4">
65        <div className="flex items-center gap-5">
66          <a className="rounded-md p-2 hover:bg-accent" href="#">
67            <LogoIcon className="size-6" />
68          </a>
69          <NavigationMenu className="hidden md:flex">
70            <NavigationMenuList>
71              <NavigationMenuItem>
72                <NavigationMenuTrigger className="bg-transparent">
73                  Product
74                </NavigationMenuTrigger>
75                <NavigationMenuContent className="bg-muted/50 p-1 pr-1.5 dark:bg-background">
76                  <ul className="grid w-lg grid-cols-2 gap-2 rounded-md border bg-popover p-2 shadow">
77                    {productLinks.map((item, _i) => (
78                      <li key={item.title}>
79                        <ListItem {...item} />
80                      </li>
81                    ))}
82                  </ul>
83                  <div className="p-2">
84                    <p className="text-muted-foreground text-sm">
85                      Interested?{" "}
86// … truncated