feat: navigation menu

app/docs/components/navigation-menu/demo.tsx

@@ -0,0 +1,138 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/8bit/navigation-menu"
+
+const components: { title: string; href: string; description: string }[] = [
+  {
+    title: "Alert Dialog",
+    href: "/docs/primitives/alert-dialog",
+    description:
+      "A modal dialog that interrupts the user with important content and expects a response.",
+  },
+  {
+    title: "Hover Card",
+    href: "/docs/primitives/hover-card",
+    description:
+      "For sighted users to preview content available behind a link.",
+  },
+  {
+    title: "Progress",
+    href: "/docs/primitives/progress",
+    description:
+      "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+  },
+  {
+    title: "Scroll-area",
+    href: "/docs/primitives/scroll-area",
+    description: "Visually or semantically separates content.",
+  },
+  {
+    title: "Tabs",
+    href: "/docs/primitives/tabs",
+    description:
+      "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+  },
+  {
+    title: "Tooltip",
+    href: "/docs/primitives/tooltip",
+    description:
+      "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+  },
+]
+
+export default function NavigationMenuDemo() {
+  return (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+              <li className="row-span-3">
+                <NavigationMenuLink asChild>
+                  <Link
+                    className="from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-6 no-underline outline-hidden select-none focus:shadow-md"
+                    href="/"
+                  >
+                    <div className="mt-4 mb-2 text-lg font-medium">
+                      shadcn/ui
+                    </div>
+                    <p className="text-muted-foreground text-sm leading-tight">
+                      Beautifully designed components built with Tailwind CSS.
+                    </p>
+                  </Link>
+                </NavigationMenuLink>
+              </li>
+              <ListItem href="/docs" title="Introduction">
+                Re-usable components built using Radix UI and Tailwind CSS.
+              </ListItem>
+              <ListItem href="/docs/installation" title="Installation">
+                How to install dependencies and structure your app.
+              </ListItem>
+              <ListItem href="/docs/primitives/typography" title="Typography">
+                Styles for headings, paragraphs, lists...etc
+              </ListItem>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+              {components.map((component) => (
+                <ListItem
+                  key={component.title}
+                  title={component.title}
+                  href={component.href}
+                >
+                  {component.description}
+                </ListItem>
+              ))}
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+
+        <NavigationMenuItem>
+          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+            <Link href="/docs">Documentation</Link>
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+
+        <NavigationMenuIndicator />
+      </NavigationMenuList>
+    </NavigationMenu>
+  )
+}
+
+function ListItem({
+  title,
+  children,
+  href,
+  ...props
+}: React.ComponentPropsWithoutRef<"li"> & { href: string }) {
+  return (
+    <li {...props}>
+      <NavigationMenuLink asChild>
+        <Link href={href}>
+          <div className="text-sm leading-none font-medium">{title}</div>
+          <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+            {children}
+          </p>
+        </Link>
+      </NavigationMenuLink>
+    </li>
+  )
+}

app/docs/components/navigation-menu/page.tsx

@@ -0,0 +1,87 @@
+import { Metadata } from "next"
+
+import { labelMetaData } from "@/lib/metadata"
+import { Separator } from "@/components/ui/separator"
+
+import CodeSnippet from "../code-snippet"
+import CopyCommandButton from "../copy-command-button"
+import InstallationCommands from "../installation-commands"
+import { OpenInV0Button } from "../open-in-v0-button"
+import NavigationMenuDemo from "./demo"
+
+export const metadata: Metadata = {
+  title: "8-bit Label",
+  description: "Displays an 8-bit label component.",
+  openGraph: {
+    images: labelMetaData,
+  },
+}
+
+export default function NavigationMenuPage() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col md:flex-row items-center justify-between gap-2">
+        <h1 className="text-3xl font-bold">Navigation Menu</h1>
+        <CopyCommandButton
+          copyCommand={`pnpm dlx shadcn@canary add ${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-navigation-menu.json`}
+          command={"pnpm dlx shadcn@canary add 8bit-navigation-menu"}
+        />
+      </div>
+
+      <p className="text-muted-foreground">
+        Displays an 8-bit navigation menu component.
+      </p>
+
+      <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px] relative">
+        <div className="flex items-center justify-between">
+          <h2 className="text-sm text-muted-foreground sm:pl-3">
+            8-bit navigation menu component
+          </h2>
+
+          <div className="flex items-center gap-2">
+            <OpenInV0Button name="8bit-navigation-menu" className="w-fit" />
+          </div>
+        </div>
+        <div className="flex items-center justify-center min-h-[400px] relative space-x-2">
+          <NavigationMenuDemo />
+        </div>
+      </div>
+
+      <h3 className="text-lg font-bold">Installation</h3>
+
+      <Separator />
+
+      <InstallationCommands
+        packageUrl={`${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-navigation-menu.json`}
+      />
+
+      <h3 className="text-lg font-bold mt-10">Usage</h3>
+
+      <Separator />
+
+      <CodeSnippet>{`import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+} from "@/components/ui/navigation-menu"
+`}</CodeSnippet>
+
+      <CodeSnippet>{`<NavigationMenu>
+  <NavigationMenuList>
+    <NavigationMenuItem>
+      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <NavigationMenuLink>Link</NavigationMenuLink>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+  </NavigationMenuList>
+</NavigationMenu>
+`}</CodeSnippet>
+    </div>
+  )
+}

components/ui/8bit/navigation-menu.tsx

@@ -0,0 +1,169 @@
+import * as React from "react"
+import { Press_Start_2P } from "next/font/google"
+import { cva, VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import {
+  NavigationMenu as ShadcnNavigationMenu,
+  NavigationMenuContent as ShadcnNavigationMenuContent,
+  NavigationMenuIndicator as ShadcnNavigationMenuIndicator,
+  NavigationMenuItem as ShadcnNavigationMenuItem,
+  NavigationMenuLink as ShadcnNavigationMenuLink,
+  NavigationMenuList as ShadcnNavigationMenuList,
+  NavigationMenuTrigger as ShadcnNavigationMenuTrigger,
+  NavigationMenuViewport as ShadcnNavigationMenuViewport,
+} from "@/components/ui/navigation-menu"
+
+export { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu"
+
+const pressStart = Press_Start_2P({
+  weight: ["400"],
+  subsets: ["latin"],
+})
+
+export const navigationMenuVariants = cva("", {
+  variants: {
+    font: {
+      normal: "",
+      retro: pressStart.className,
+    },
+  },
+  defaultVariants: {
+    font: "retro",
+  },
+})
+
+type FontVariantProps = VariantProps<typeof navigationMenuVariants>
+
+export interface BitNavigationMenuProps
+  extends React.ComponentProps<typeof ShadcnNavigationMenu>,
+    VariantProps<typeof navigationMenuVariants> {
+  asChild?: boolean
+}
+
+function NavigationMenu({
+  className,
+  font,
+  ...props
+}: React.ComponentProps<typeof ShadcnNavigationMenu> & FontVariantProps) {
+  return (
+    <ShadcnNavigationMenu
+      className={cn(font !== "normal" && pressStart.className, className)}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuList({
+  className,
+  font,
+  ...props
+}: React.ComponentProps<typeof ShadcnNavigationMenuList> &
+  VariantProps<typeof navigationMenuVariants>) {
+  return (
+    <ShadcnNavigationMenuList
+      className={cn(font !== "normal" && pressStart.className, className)}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  font,
+  ...props
+}: React.ComponentProps<typeof ShadcnNavigationMenuItem> & FontVariantProps) {
+  return (
+    <ShadcnNavigationMenuItem
+      className={cn(
+        "static",
+        font !== "normal" && pressStart.className,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuTrigger({
+  className,
+  font,
+  ...props
+}: React.ComponentProps<typeof ShadcnNavigationMenuTrigger> &
+  FontVariantProps) {
+  return (
+    <ShadcnNavigationMenuTrigger
+      className={cn(font !== "normal" && pressStart.className, className)}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  font,
+  children,
+  ...props
+}: React.ComponentProps<typeof ShadcnNavigationMenuContent> &
+  FontVariantProps) {
+  return (
+    <ShadcnNavigationMenuContent
+      className={cn(font !== "normal" && pressStart.className, className)}
+      {...props}
+    >
+      {children}
+    </ShadcnNavigationMenuContent>
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  font,
+  ...props
+}: React.ComponentProps<typeof ShadcnNavigationMenuViewport> &
+  FontVariantProps) {
+  return (
+    <ShadcnNavigationMenuViewport
+      className={cn(font !== "normal" && pressStart.className, className)}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  font,
+  ...props
+}: React.ComponentProps<typeof ShadcnNavigationMenuLink> & FontVariantProps) {
+  return (
+    <ShadcnNavigationMenuLink
+      className={cn(font !== "normal" && pressStart.className, className)}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  font,
+  ...props
+}: React.ComponentProps<typeof ShadcnNavigationMenuIndicator> &
+  FontVariantProps) {
+  return (
+    <ShadcnNavigationMenuIndicator
+      className={cn(font !== "normal" && pressStart.className, className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+}