systeme.io-task

1
import * as React from "react";
2
import { cva, type VariantProps } from "class-variance-authority";
3

4
import { cn } from "~/shared/lib/utils";
5

6
const badgeVariants = cva(
7
  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
8
  {
9
    variants: {
10
      variant: {
11
        default:
12
          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
13
        secondary:
14
          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15
        destructive:
16
          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
17
        outline: "text-foreground",
18
      },
19
    },
20
    defaultVariants: {
21
      variant: "default",
22
    },
23
  },
24
);
25

26
export interface BadgeProps
27
  extends React.HTMLAttributes<HTMLDivElement>,
28
    VariantProps<typeof badgeVariants> {}
29

30
function Badge({ className, variant, ...props }: BadgeProps) {
31
  return (
32
    <div className={cn(badgeVariants({ variant }), className)} {...props} />
33
  );
34
}
35

36
export { Badge, badgeVariants };
37