8-bit Navigation Menu

1import type * as React from "react";
2 
3import { Indicator, Root, Viewport } from "@radix-ui/react-navigation-menu";
4import { type VariantProps, cva } from "class-variance-authority";
5 
6import { cn } from "@/lib/utils";
7 
8import {
9  NavigationMenuContent as ShadcnNavigationMenuContent,
10  type NavigationMenuIndicator as ShadcnNavigationMenuIndicator,
11  NavigationMenuItem as ShadcnNavigationMenuItem,
12  NavigationMenuLink as ShadcnNavigationMenuLink,
13  NavigationMenuList as ShadcnNavigationMenuList,
14  NavigationMenuTrigger as ShadcnNavigationMenuTrigger,
15} from "@/components/ui/navigation-menu";
16 
17import "@/components/ui/8bit/styles/retro.css";
18 
19export { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
20 
21export const navigationMenuVariants = cva("", {
22  variants: {
23    font: {
24      normal: "",
25      retro: "retro",
26    },
27  },
28  defaultVariants: {
29    font: "retro",
30  },
31});
32 
33type FontVariantProps = VariantProps<typeof navigationMenuVariants>;
34 
35const getFontClassName = (font: FontVariantProps["font"]) =>
36  navigationMenuVariants({ font });
37 
38function NavigationMenu({
39  className,
40  font,
41  children,
42  viewport = true,
43  ...props
44}: React.ComponentProps<typeof Root> & {
45  viewport?: boolean;
46} & FontVariantProps) {
47  return (
48    <Root
49      data-slot="navigation-menu"
50      data-viewport={viewport}
51      className={cn(
52        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
53        getFontClassName(font),
54        className
55      )}
56      {...props}
57    >
58      {children}
59      {viewport && <NavigationMenuViewport />}
60    </Root>
61  );
62}
63 
64function NavigationMenuList({
65  className,
66  font,
67  ...props
68}: React.ComponentProps<typeof ShadcnNavigationMenuList> &
69  VariantProps<typeof navigationMenuVariants>) {
70  return (
71    <ShadcnNavigationMenuList
72      className={cn(getFontClassName(font), className)}
73      {...props}
74    />
75  );
76}
77 
78function NavigationMenuItem({
79  className,
80  font,
81  ...props
82}: React.ComponentProps<typeof ShadcnNavigationMenuItem> & FontVariantProps) {
83  return (
84    <ShadcnNavigationMenuItem
85      className={cn("static", getFontClassName(font), className)}
86      {...props}
87    />
88  );
89}
90 
91function NavigationMenuTrigger({
92  className,
93  font,
94  ...props
95}: React.ComponentProps<typeof ShadcnNavigationMenuTrigger> &
96  FontVariantProps) {
97  return (
98    <ShadcnNavigationMenuTrigger
99      className={cn(getFontClassName(font), className)}
100      {...props}
101    />
102  );
103}
104 
105// … truncated