1  "use client";
 2  import React, { useState } from "react";
 3  import { HoveredLink, Menu, MenuItem, ProductItem } from "./ui/navbar-menu";
 4  import { cn } from "@/lib/utils";
 5  
 6  export function NavbarDemo() {
 7    return (
 8      <div className="relative w-full flex items-center justify-center">
 9        <Navbar className="top-2" />
10      </div>
11    );
12  }
13  
14  function Navbar({ className }: { className?: string }) {
15    const [active, setActive] = useState<string | null>(null);
16    return (
17      <div
18        className={cn("fixed top-10 inset-x-0 max-w-2xl mx-auto z-50", className)}
19      >
20        <Menu setActive={setActive}>
21          <MenuItem setActive={setActive} active={active} item="Services">
22            <div className="flex flex-col space-y-4 text-sm">
23              <HoveredLink href="/web-dev">Web Development</HoveredLink>
24              <HoveredLink href="/interface-design">Interface Design</HoveredLink>
25              <HoveredLink href="/seo">Search Engine Optimization</HoveredLink>
26              <HoveredLink href="/branding">Branding</HoveredLink>
27            </div>
28          </MenuItem>
29          <MenuItem setActive={setActive} active={active} item="Products">
30            <div className="  text-sm grid grid-cols-2 gap-10 p-4">
31      
32            </div>
33          </MenuItem>
34          <MenuItem setActive={setActive} active={active} item="Pricing">
35            <div className="flex flex-col space-y-4 text-sm">
36              <HoveredLink href="/hobby">Hobby</HoveredLink>
37              <HoveredLink href="/individual">Individual</HoveredLink>
38              <HoveredLink href="/team">Team</HoveredLink>
39              <HoveredLink href="/enterprise">Enterprise</HoveredLink>
40            </div>
41          </MenuItem>
42        </Menu>
43      </div>
44    );
45  }