Badge

1
import type { VariantProps } from "class-variance-authority";
2
import type { Component, ComponentProps } from "solid-js";
3

4
import { splitProps } from "solid-js";
5
import { cva } from "class-variance-authority";
6

7
import { cn } from "~/lib/utils";
8

9
const badgeVariants = cva(
10
  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-base border-2 border-border px-2.5 py-0.5 text-xs font-base whitespace-nowrap focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg]:pointer-events-none [&>svg]:size-3",
11
  {
12
    variants: {
13
      variant: {
14
        default: "bg-primary text-primary-foreground",
15
        neutral: "bg-secondary-background text-foreground",
16
      },
17
    },
18
    defaultVariants: {
19
      variant: "default",
20
    },
21
  },
22
);
23

24
type BadgeProps = ComponentProps<"div"> &
25
  VariantProps<typeof badgeVariants> & {
26
    round?: boolean;
27
  };
28

29
const Badge: Component<BadgeProps> = (props) => {
30
  const [local, others] = splitProps(props, ["class", "variant", "round"]);
31
  return (
32
    <div
33
      data-slot="badge"
34
      class={cn(
35
        badgeVariants({ variant: local.variant }),
36
        local.round && "rounded-full",
37
        local.class,
38
      )}
39
      {...others}
40
    />
41
  );
42
};
43

44
export type { BadgeProps };
45
export { Badge, badgeVariants };