Navbar 01

1"use client";
2 
3import { useState } from "react";
4import { cn } from "@/lib/utils";
5import { Button } from "@/components/ui/button";
6import {
7  NavigationMenu,
8  NavigationMenuContent,
9  NavigationMenuItem,
10  NavigationMenuLink,
11  NavigationMenuList,
12  NavigationMenuTrigger,
13} from "@/components/ui/navigation-menu";
14import {
15  Sheet,
16  SheetContent,
17  SheetHeader,
18  SheetTitle,
19  SheetTrigger,
20} from "@/components/ui/sheet";
21import {
22  Blocks,
23  ChevronDown,
24  Layers,
25  Menu,
26  Sparkles,
27  Sunset,
28} from "lucide-react";
29 
30// ---- Types ----
31 
32interface NavSubItem {
33  text: string;
34  url: string;
35  description?: string;
36  icon?: React.ReactNode;
37}
38 
39interface NavItemSimple {
40  type: "link";
41  text: string;
42  url: string;
43}
44 
45interface NavItemMenu {
46  type: "menu";
47  title: string;
48  items: NavSubItem[];
49}
50 
51type NavItem = NavItemSimple | NavItemMenu;
52 
53interface NavButton {
54  text: string;
55  url: string;
56  variant?: "default" | "outline" | "ghost" | "secondary";
57}
58 
59interface Navbar01Props {
60  logo?: React.ReactNode;
61  navItems?: NavItem[];
62  buttons?: NavButton[];
63  className?: string;
64}
65 
66// ---- Desktop menu item card ----
67 
68const SubItemCard = ({ item }: { item: NavSubItem }) => (
69  <NavigationMenuLink asChild>
70    <a
71      href={item.url}
72      className="flex items-start gap-2 rounded-md p-4 transition-colors hover:bg-muted"
73    >
74      {item.icon && (
75        <div className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-md border bg-background text-muted-foreground">
76          {item.icon}
77        </div>
78      )}
79      <div>
80        <p className="text-sm leading-snug font-semibold">{item.text}</p>
81        {item.description && (
82          <p className="mt-0.5 text-sm leading-snug text-muted-foreground">
83            {item.description}
84          </p>
85        )}
86      </div>
87    </a>
88  </NavigationMenuLink>
89);
90 
91// ---- Mobile accordion group ----
92 
93const MobileMenuGroup = ({ item }: { item: NavItemMenu }) => {
94  const [open, setOpen] = useState(false);
95  return (
96    <div>
97      <button
98        onClick={() => setOpen(!open)}
99        className="flex w-full items-center justify-between py-3 text-base font-semibold"
100      >
101        {item.title}
102        <ChevronDown
103          className={cn(
104            "size-4 text-muted-foreground transition-transform",
105            open && "rotate-180",
106          )}
107        />
108      </button>
109      {open && (
110        <div className="flex flex-col gap-1 pb-2 pl-2">
111          {item.items.map((sub) => (
112            <a
113// … truncated