diff --git a/app/docs/components/navigation-menu/demo.tsx b/app/docs/components/navigation-menu/demo.tsx new file mode 100644 index 00000000..d0f345ec --- /dev/null +++ b/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 ( + + + + Getting started + +
    +
  • + + +
    + shadcn/ui +
    +

    + Beautifully designed components built with Tailwind CSS. +

    + +     +
    • + + Re-usable components built using Radix UI and Tailwind CSS. + + + How to install dependencies and structure your app. + + + Styles for headings, paragraphs, lists...etc + +
+ + + + + Components + +
    + {components.map((component) => ( + + {component.description} + + ))} +
+ + + + + + Documentation + + + + + + + ) +} + +function ListItem({ + title, + children, + href, + ...props +}: React.ComponentPropsWithoutRef<"li"> & { href: string }) { + return ( +
  • + + +
    {title}
    +

    + {children} +

    + +     +
    • + ) +} diff --git a/app/docs/components/navigation-menu/page.tsx b/app/docs/components/navigation-menu/page.tsx new file mode 100644 index 00000000..99077d70 --- /dev/null +++ b/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 ( +
    +
    +

    Navigation Menu

    + +
    + +

    + Displays an 8-bit navigation menu component. +

    + +
    +
    +

    + 8-bit navigation menu component +

    + +
    + +
    +
    +
    + +
    +
    + +

    Installation

    + + + + + +

    Usage

    + + + + {`import { + NavigationMenu, + NavigationMenuContent, + NavigationMenuIndicator, + NavigationMenuItem, + NavigationMenuLink, + NavigationMenuList, + NavigationMenuTrigger, + NavigationMenuViewport, +} from "@/components/ui/navigation-menu" +`} + + {` + + + Item One + + Link + + + + +`} +
    + ) +} diff --git a/components/ui/8bit/navigation-menu.tsx b/components/ui/8bit/navigation-menu.tsx new file mode 100644 index 00000000..3e69298e --- /dev/null +++ b/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 + +export interface BitNavigationMenuProps + extends React.ComponentProps, + VariantProps { + asChild?: boolean +} + +function NavigationMenu({ + className, + font, + ...props +}: React.ComponentProps & FontVariantProps) { + return ( + + ) +} + +function NavigationMenuList({ + className, + font, + ...props +}: React.ComponentProps & + VariantProps) { + return ( + + ) +} + +function NavigationMenuItem({ + className, + font, + ...props +}: React.ComponentProps & FontVariantProps) { + return ( + + ) +} + +function NavigationMenuTrigger({ + className, + font, + ...props +}: React.ComponentProps & + FontVariantProps) { + return ( + + ) +} + +function NavigationMenuContent({ + className, + font, + children, + ...props +}: React.ComponentProps & + FontVariantProps) { + return ( + + {children} + + ) +} + +function NavigationMenuViewport({ + className, + font, + ...props +}: React.ComponentProps & + FontVariantProps) { + return ( + + ) +} + +function NavigationMenuLink({ + className, + font, + ...props +}: React.ComponentProps & FontVariantProps) { + return ( + + ) +} + +function NavigationMenuIndicator({ + className, + font, + ...props +}: React.ComponentProps & + FontVariantProps) { + return ( + + ) +} + +export { + NavigationMenu, + NavigationMenuContent, + NavigationMenuIndicator, + NavigationMenuItem, + NavigationMenuLink, + NavigationMenuList, + NavigationMenuTrigger, + NavigationMenuViewport, +} diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx new file mode 100644 index 00000000..1199945c --- /dev/null +++ b/components/ui/navigation-menu.tsx @@ -0,0 +1,168 @@ +import * as React from "react" +import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu" +import { cva } from "class-variance-authority" +import { ChevronDownIcon } from "lucide-react" + +import { cn } from "@/lib/utils" + +function NavigationMenu({ + className, + children, + viewport = true, + ...props +}: React.ComponentProps & { + viewport?: boolean +}) { + return ( + + {children} + {viewport && } + + ) +} + +function NavigationMenuList({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function NavigationMenuItem({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +const navigationMenuTriggerStyle = cva( + "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1" +) + +function NavigationMenuTrigger({ + className, + children, + ...props +}: React.ComponentProps) { + return ( + + {children}{" "} + + ) +} + +function NavigationMenuContent({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function NavigationMenuViewport({ + className, + ...props +}: React.ComponentProps) { + return ( +
    + +
    + ) +} + +function NavigationMenuLink({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function NavigationMenuIndicator({ + className, + ...props +}: React.ComponentProps) { + return ( + +
    + + ) +} + +export { + NavigationMenu, + NavigationMenuList, + NavigationMenuItem, + NavigationMenuContent, + NavigationMenuTrigger, + NavigationMenuLink, + NavigationMenuIndicator, + NavigationMenuViewport, + navigationMenuTriggerStyle, +} diff --git a/config/nav-items.ts b/config/nav-items.ts index 2e189020..cb54fa41 100644 --- a/config/nav-items.ts +++ b/config/nav-items.ts @@ -102,6 +102,10 @@ export const navItems = { url: "/docs/components/scroll-area", new: true, }, + { + title: "Navigation Menu", + url: "/docs/components/navigation-menu", + }, { title: "Select", url: "/docs/components/select", diff --git a/package.json b/package.json index 4be9a7c7..a2a01cb2 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@radix-ui/react-dropdown-menu": "^2.1.14", "@radix-ui/react-hover-card": "^1.1.13", "@radix-ui/react-label": "^2.1.6", + "@radix-ui/react-navigation-menu": "^1.2.12", "@radix-ui/react-popover": "^1.1.13", "@radix-ui/react-progress": "^1.1.6", "@radix-ui/react-radio-group": "^1.3.6", diff --git a/public/r/8bit-navigation-menu.json b/public/r/8bit-navigation-menu.json new file mode 100644 index 00000000..eb0ff8e8 --- /dev/null +++ b/public/r/8bit-navigation-menu.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "8bit-navigation-menu", + "type": "registry:component", + "title": "8-bit Navigation Menu", + "description": "A simple 8-bit navigation menu component", + "registryDependencies": [ + "sidebar" + ], + "files": [ + { + "path": "components/ui/8bit/navigation-menu.tsx", + "content": "import * as React from \"react\"\nimport { Press_Start_2P } from \"next/font/google\"\nimport { Root } from \"@radix-ui/react-navigation-menu\"\nimport { cva, VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n NavigationMenu as ShadcnNavigationMenu,\n NavigationMenuContent as ShadcnNavigationMenuContent,\n NavigationMenuIndicator as ShadcnNavigationMenuIndicator,\n NavigationMenuItem as ShadcnNavigationMenuItem,\n NavigationMenuLink as ShadcnNavigationMenuLink,\n NavigationMenuList as ShadcnNavigationMenuList,\n NavigationMenuTrigger as ShadcnNavigationMenuTrigger,\n NavigationMenuViewport as ShadcnNavigationMenuViewport,\n} from \"@/components/ui/navigation-menu\"\n\nexport { navigationMenuTriggerStyle } from \"@/components/ui/navigation-menu\"\n\nconst pressStart = Press_Start_2P({\n weight: [\"400\"],\n subsets: [\"latin\"],\n})\n\nexport const navigationMenuVariants = cva(\"\", {\n variants: {\n font: {\n normal: \"\",\n retro: pressStart.className,\n },\n },\n defaultVariants: {\n font: \"retro\",\n },\n})\n\ntype FontVariantProps = VariantProps\n\nexport interface BitNavigationMenuProps\n extends React.ComponentProps,\n VariantProps {\n asChild?: boolean\n}\n\nfunction NavigationMenu({\n className,\n font,\n ...props\n}: React.ComponentProps & FontVariantProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuList({\n className,\n font,\n ...props\n}: React.ComponentProps &\n VariantProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuItem({\n className,\n font,\n ...props\n}: React.ComponentProps & FontVariantProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuTrigger({\n className,\n font,\n ...props\n}: React.ComponentProps &\n FontVariantProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuContent({\n className,\n font,\n children,\n ...props\n}: React.ComponentProps &\n FontVariantProps) {\n return (\n \n {children}\n \n )\n}\n\nfunction NavigationMenuViewport({\n className,\n font,\n children,\n ...props\n}: React.ComponentProps &\n FontVariantProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuLink({\n className,\n font,\n ...props\n}: React.ComponentProps & FontVariantProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuIndicator({\n className,\n font,\n ...props\n}: React.ComponentProps &\n FontVariantProps) {\n return (\n \n )\n}\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n}\n", + "type": "registry:component", + "target": "components/ui/8bit/navigation-menu.tsx" + } + ] +} \ No newline at end of file diff --git a/registry.json b/registry.json index df315118..4c712e2b 100644 --- a/registry.json +++ b/registry.json @@ -685,6 +685,20 @@ "target": "components/ui/8bit/blocks/sidebar.tsx" } ] + }, + { + "name": "8bit-navigation-menu", + "type": "registry:component", + "title": "8-bit Navigation Menu", + "description": "A simple 8-bit navigation menu component", + "registryDependencies": ["sidebar"], + "files": [ + { + "path": "components/ui/8bit/navigation-menu.tsx", + "type": "registry:component", + "target": "components/ui/8bit/navigation-menu.tsx" + } + ] } ] }