8-bit Badge

1import { type VariantProps, cva } from "class-variance-authority";
2 
3import { cn } from "@/lib/utils";
4 
5import { Badge as ShadcnBadge } from "@/components/ui/badge";
6 
7export const badgeVariants = cva("", {
8  variants: {
9    font: {
10      normal: "",
11      retro: "retro",
12    },
13    variant: {
14      default: "border-primary bg-primary",
15      destructive: "border-destructive bg-destructive",
16      outline: "border-background bg-background",
17      secondary: "border-secondary bg-secondary",
18    },
19  },
20  defaultVariants: {
21    variant: "default",
22  },
23});
24 
25export interface BitButtonProps
26  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
27    VariantProps<typeof badgeVariants> {
28  asChild?: boolean;
29}
30 
31function Badge({
32  children,
33  className = "",
34  font,
35  variant,
36  ...props
37}: BitButtonProps) {
38  const color = badgeVariants({ variant, font });
39 
40  const classes = className.split(" ");
41 
42  // visual classes for badge and sidebars
43  const visualClasses = classes.filter(
44    (c) =>
45      c.startsWith("bg-") ||
46      c.startsWith("border-") ||
47      c.startsWith("text-") ||
48      c.startsWith("rounded-")
49  );
50 
51  // Container should accept all non-visual utility classes (e.g., size, spacing, layout)
52  const containerClasses = classes.filter(
53    (c) =>
54      !(
55        c.startsWith("bg-") ||
56        c.startsWith("border-") ||
57        c.startsWith("text-") ||
58        c.startsWith("rounded-")
59      )
60  );
61 
62  return (
63    <div className={cn("relative inline-flex items-stretch", containerClasses)}>
64      <ShadcnBadge
65        {...props}
66        className={cn(
67          "h-full",
68          "rounded-none",
69          "w-full",
70          font !== "normal" && "retro",
71          visualClasses
72        )}
73        variant={variant}
74      >
75        {children}
76      </ShadcnBadge>
77 
78      {/* Left pixel bar */}
79      <div
80        className={cn(
81          "-left-1.5 absolute inset-y-[4px] w-1.5",
82          color,
83          visualClasses
84        )}
85      />
86      {/* Right pixel bar */}
87      <div
88        className={cn(
89          "-right-1.5 absolute inset-y-[4px] w-1.5",
90          color,
91          visualClasses
92        )}
93      />
94    </div>
95  );
96}
97 
98export { Badge };