Mega Menu Block

1"use client";
2 
3import { Boxes, Code2, LayoutDashboard, Sparkles } from "lucide-react";
4 
5import {
6  Navbar,
7  NavbarBrand,
8  NavbarDropdown,
9  NavbarLinks,
10  NavbarMain,
11  NavbarMegaMenu,
12  NavbarMegaMenuItem,
13  NavbarMobileDropdown,
14  NavbarMobileMenu,
15  NavbarMobileToggle,
16} from "@/components/ui/organisms/navbar";
17 
18const products = [
19  { title: "UI components", description: "Accessible building blocks", icon: Boxes },
20  { title: "Application blocks", description: "Responsive product layouts", icon: LayoutDashboard },
21  { title: "Source registry", description: "Own and adapt every file", icon: Code2 },
22];
23 
24function MegaMenuBlock() {
25  return (
26    <Navbar data-slot="mega-menu-block" variant="glass" className="rounded-lg">
27      <NavbarMain>
28        <NavbarBrand href="#" className="font-semibold">
29          <Sparkles className="size-5 text-primary" /> Poyraz UI
30        </NavbarBrand>
31        <NavbarLinks aria-label="Product navigation">
32          <NavbarDropdown label="Products">
33            <NavbarMegaMenu layout="full">
34              {products.map(({ title, description, icon: Icon }) => (
35                <NavbarMegaMenuItem key={title} href="#" title={title} description={description}>
36                  <Icon className="mt-2 size-4 text-primary" />
37                </NavbarMegaMenuItem>
38              ))}
39            </NavbarMegaMenu>
40          </NavbarDropdown>
41        </NavbarLinks>
42        <NavbarMobileToggle />
43      </NavbarMain>
44      <NavbarMobileMenu>
45        <NavbarMobileDropdown label="Products">
46          {products.map(({ title }) => (
47            <a key={title} href="#" className="block px-3 py-2 text-sm">
48              {title}
49            </a>
50          ))}
51        </NavbarMobileDropdown>
52      </NavbarMobileMenu>
53    </Navbar>
54  );
55}
56 
57export { MegaMenuBlock, products as megaMenuProducts };