Navigation Menu

"use client";

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";

export function Demo() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Começar</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[240px] gap-fe-2 p-fe-3">
              <li>
                <NavigationMenuLink href="/design-system">
                  Visão geral
                </NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink href="/design-system/colors">
                  Cores
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink
            href="/design-system/typography"
            className={navigationMenuTriggerStyle()}
          >
            Tipografia
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}