8-bit Breadcrumb

1import { Slot } from "@radix-ui/react-slot";
2import { type VariantProps, cva } from "class-variance-authority";
3import { MoreHorizontal } from "lucide-react";
4 
5import { cn } from "@/lib/utils";
6 
7import {
8  Breadcrumb as ShadcnBreadcrumb,
9  BreadcrumbEllipsis as ShadcnBreadcrumbEllipsis,
10  BreadcrumbItem as ShadcnBreadcrumbItem,
11  BreadcrumbList as ShadcnBreadcrumbList,
12  BreadcrumbPage as ShadcnBreadcrumbPage,
13  BreadcrumbSeparator as ShadcnBreadcrumbSeparator,
14} from "@/components/ui/breadcrumb";
15 
16import "@/components/ui/8bit/styles/retro.css";
17 
18export const breadcrumbVariants = cva("", {
19  variants: {
20    font: {
21      normal: "",
22      retro: "retro",
23    },
24    variant: {
25      default: "text-card-foreground",
26      destructive:
27        "text-destructive [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
28    },
29  },
30  defaultVariants: {
31    variant: "default",
32  },
33});
34 
35interface BitBreadcrumbNavigationProps
36  extends React.ComponentProps<"nav">,
37    VariantProps<typeof breadcrumbVariants> {}
38 
39interface BitBreadcrumbOrderedListProps
40  extends React.ComponentProps<"ol">,
41    VariantProps<typeof breadcrumbVariants> {}
42 
43interface BitBreadcrumbSpanProps
44  extends React.ComponentProps<"span">,
45    VariantProps<typeof breadcrumbVariants> {}
46 
47interface BitBreadcrumbListItemProps
48  extends React.ComponentProps<"li">,
49    VariantProps<typeof breadcrumbVariants> {}
50 
51interface BitBreadcrumbLinkProps
52  extends React.ComponentProps<"a">,
53    VariantProps<typeof breadcrumbVariants> {}
54 
55const ChevronRight = () => {
56  return (
57    <svg
58      width="50"
59      height="50"
60      viewBox="0 0 256 256"
61      fill="currentColor"
62      xmlns="http://www.w3.org/2000/svg"
63      stroke="currentColor"
64      strokeWidth="0.25"
65      color=""
66      className="size-7"
67      aria-label="chevron-right"
68    >
69      <rect x="128" y="136" width="14" height="14" rx="1"></rect>
70      <rect x="112" y="152" width="14" height="14" rx="1"></rect>
71      <rect x="96" y="72" width="14" height="14" rx="1"></rect>
72      <rect x="96" y="168" width="14" height="14" rx="1"></rect>
73      <rect x="144" y="120" width="14" height="14" rx="1"></rect>
74      <rect x="128" y="104" width="14" height="14" rx="1"></rect>
75      <rect x="112" y="88" width="14" height="14" rx="1"></rect>
76    </svg>
77  );
78};
79 
80function Breadcrumb({ children, ...props }: BitBreadcrumbNavigationProps) {
81  const { variant, className, font } = props;
82 
83  return (
84    <div
85      className={cn(
86// … truncated