Navigation Menu

// owner: Sona
"use client";

import Link from "next/link";

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

const products = [
  {
    title: "Automation",
    description: "Create workflows triggered by your infrastructure events.",
  },
  {
    title: "Observability",
    description: "Unify logs, traces, and metrics in one place.",
  },
];

export default function NavigationMenuExample() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
          <NavigationMenuContent className="grid w-[320px] gap-3 p-4 md:w-[500px] md:grid-cols-2">
            {products.map((product) => (
              <NavigationMenuLink
                asChild
                key={product.title}
                className="rounded-md border p-3"
              >
                <Link href="#">
                  <div className="text-sm font-medium">{product.title}</div>
                  <p className="text-muted-foreground text-xs">
                    {product.description}
                  </p>
                </Link>
              </NavigationMenuLink>
            ))}
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
          <NavigationMenuContent className="w-48 p-2">
            <NavigationMenuLink
              asChild
              className="block rounded-md px-2 py-1 text-sm hover:bg-muted"
            >
              <Link href="#">Docs</Link>
            </NavigationMenuLink>
            <NavigationMenuLink
              asChild
              className="block rounded-md px-2 py-1 text-sm hover:bg-muted"
            >
              <Link href="#">Support</Link>
            </NavigationMenuLink>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink className="rounded-md px-4 py-2 text-sm font-medium">
            Pricing
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}