Badge

1import type { Component, ComponentProps } from "solid-js"
2import { splitProps } from "solid-js"
3 
4import type { VariantProps } from "class-variance-authority"
5import { cva } from "class-variance-authority"
6 
7import { cn } from "~/lib/utils"
8 
9const badgeVariants = cva(
10  "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",
11  {
12    variants: {
13      variant: {
14        default: "border-transparent bg-primary text-primary-foreground",
15        secondary: "border-transparent bg-secondary text-secondary-foreground",
16        outline: "text-foreground",
17        success: "border-success-foreground bg-success text-success-foreground",
18        warning: "border-warning-foreground bg-warning text-warning-foreground",
19        error: "border-error-foreground bg-error text-error-foreground"
20      }
21    },
22    defaultVariants: {
23      variant: "default"
24    }
25  }
26)
27 
28type BadgeProps = ComponentProps<"div"> &
29  VariantProps<typeof badgeVariants> & {
30    round?: boolean
31  }
32 
33const Badge: Component<BadgeProps> = (props) => {
34  const [local, others] = splitProps(props, ["class", "variant", "round"])
35  return (
36    <div
37      class={cn(
38        badgeVariants({ variant: local.variant }),
39        local.round && "rounded-full",
40        local.class
41      )}
42      {...others}
43    />
44  )
45}
46 
47export type { BadgeProps }
48export { Badge, badgeVariants }