Badge

1import { type VariantProps, cva } from "class-variance-authority";
2import type { Component, JSX } from "solid-js";
3import { splitProps } from "solid-js";
4import { cn } from "~/lib/utils";
5 
6export const badgeVariants = cva(
7  "inline-flex items-center rounded-full 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: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
12        secondary:
13          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
14        destructive:
15          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
16        outline: "text-foreground",
17      },
18    },
19    defaultVariants: {
20      variant: "default",
21    },
22  },
23);
24 
25export type BadgeProps = JSX.HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>;
26 
27export const Badge: Component<BadgeProps> = (props) => {
28  const [local, variants, rest] = splitProps(props, ["class"], ["variant"]);
29 
30  return <div class={cn(badgeVariants(variants), local.class)} {...rest} />;
31};