Navbar Menu

"use client";
import React, { useState } from "react";
import {
  HoveredLink,
  Menu,
  MenuItem,
  ProductItem,
} from "@/lab/aceternity/ui/navbar-menu";
import { cn } from "@/lib/utils";
import { FitStage } from "./_fit-g2";

export default function NavbarDemo() {
  return (
    <FitStage width={760} height={475} maxScale={1.4}>
      <div className="relative flex h-full w-full items-center justify-center">
        <Navbar className="top-6" />
        <p className="text-black dark:text-white">
          Hover over the navbar to see the menu
        </p>
      </div>
    </FitStage>
  );
}

// Demo links stay on the page.
const stay = (e: React.MouseEvent) => e.preventDefault();

function Navbar({ className }: { className?: string }) {
  const [active, setActive] = useState<string | null>(null);
  return (
    <div
      className={cn("absolute inset-x-0 top-10 z-50 mx-auto max-w-2xl", className)}
    >
      <Menu setActive={setActive}>
        <MenuItem setActive={setActive} active={active} item="Services">
          <div className="flex flex-col space-y-4 text-sm">
            <HoveredLink href="#" onClick={stay}>Web Development</HoveredLink>
            <HoveredLink href="#" onClick={stay}>Interface Design</HoveredLink>
            <HoveredLink href="#" onClick={stay}>Search Engine Optimization</HoveredLink>
            <HoveredLink href="#" onClick={stay}>Branding</HoveredLink>
          </div>
        </MenuItem>
        <MenuItem setActive={setActive} active={active} item="Products">
          <div className="grid grid-cols-2 gap-10 p-4 text-sm">
            <ProductItem
              title="Algochurn"
              href="https://algochurn.com"
              src="https://assets.aceternity.com/demos/algochurn.webp"
              description="Prepare for tech interviews like never before."
            />
            <ProductItem
              title="Tailwind Master Kit"
              href="https://tailwindmasterkit.com"
              src="https://assets.aceternity.com/demos/tailwindmasterkit.webp"
              description="Production ready Tailwind css components for your next project"
            />
            <ProductItem
              title="Moonbeam"
              href="https://gomoonbeam.com"
              src="https://assets.aceternity.com/demos/Screenshot%202024-02-21%20at%2011.51.31%E2%80%AFPM.png"
              description="Never write from scratch again. Go from idea to blog in minutes."
            />
            <ProductItem
              title="Rogue"
              href="https://userogue.com"
              src="https://assets.aceternity.com/demos/Screenshot%202024-02-21%20at%2011.47.07%E2%80%AFPM.png"
              description="Respond to government RFPs, RFIs and RFQs 10x faster using AI"
            />
          </div>
        </MenuItem>
        <MenuItem setActive={setActive} active={active} item="Pricing">
          <div className="flex flex-col space-y-4 text-sm">
            <HoveredLink href="#" onClick={stay}>Hobby</HoveredLink>
            <HoveredLink href="#" onClick={stay}>Individual</HoveredLink>
            <HoveredLink href="#" onClick={stay}>Team</HoveredLink>
            <HoveredLink href="#" onClick={stay}>Enterprise</HoveredLink>
          </div>
        </MenuItem>
      </Menu>
    </div>
  );
}