Pixelact Badge

1import { type VariantProps, cva } from "class-variance-authority";
2import { cn } from "@/lib/utils";
3import { Badge as ShadcnBadge } from "@/components/ui/badge";
4 
5const badgeVariants = cva("border-none", {
6  variants: {
7    font: {
8      normal: "",
9      pixel: "pixel-font",
10    },
11    variant: {
12      default: "bg-primary",
13      destructive: "bg-destructive",
14      outline: "bg-background",
15      secondary: "bg-secondary",
16    },
17  },
18  defaultVariants: {
19    font: "pixel",
20    variant: "default",
21  },
22});
23 
24export interface BadgeProps
25  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
26    VariantProps<typeof badgeVariants> {
27  asChild?: boolean;
28}
29 
30function Badge({ children, font, variant, ...props }: BadgeProps) {
31  return (
32    <div className={cn("relative inline-flex")}>
33      <ShadcnBadge
34        {...props}
35        className={cn(
36          "rounded-none shadow-(--pixel-box-shadow) box-shadow-margin",
37          badgeVariants({ variant, font })
38        )}
39        variant={variant}
40      >
41        {children}
42      </ShadcnBadge>
43    </div>
44  );
45}
46 
47export { Badge };