Navigation Menu

"use client";

import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
import { cva } from "class-variance-authority";
import { ChevronDown } from "lucide-react";
import type * as React from "react";
import { cn } from "@/lib/utils";

function PixelNavigationMenu({
  className,
  children,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Root>) {
  return (
    <NavigationMenuPrimitive.Root
      className={cn(
        "relative z-10 flex max-w-max flex-1 items-center justify-center font-[family-name:var(--font-press-start)]",
        className,
      )}
      {...props}
    >
      {children}
      <PixelNavigationMenuViewport />
    </NavigationMenuPrimitive.Root>
  );
}

function PixelNavigationMenuList({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
  return (
    <NavigationMenuPrimitive.List
      className={cn(
        "group flex flex-1 list-none items-center justify-center space-x-1",
        className,
      )}
      {...props}
    />
  );
}

function PixelNavigationMenuItem({
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
  return <NavigationMenuPrimitive.Item {...props} />;
}

const pixelNavigationMenuTriggerStyle = cva(
  "group inline-flex h-10 w-max items-center justify-center px-4 py-2 text-xs font-bold duration-0 border-2 border-black bg-[#fffacd] dark:bg-[#2a2a2a] shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:bg-[#ffd700] focus:bg-[#ffd700] disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-[#ff6b6b] data-[active]:text-white data-[state=open]:bg-[#ff6b6b] data-[state=open]:text-white",

// ... (more code below)