1
6import * as React from "react";
7import { clsx } from "clsx";
8import { STATUS_COLORS } from "@factory/shared/constants";
9
10export type BadgeStatus = (typeof STATUS_COLORS)[number];
11
12export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
13
14 status?: BadgeStatus;
15
16 variant?: "solid" | "outline";
17}
18
19export function Badge({ status = "gray", variant = "outline", className, ...props }: BadgeProps) {
20 return (
21 <span
22 className={clsx(
23 "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
24 className,
25 )}
26 style={
27 variant === "solid"
28 ? {
29 color: `var(--block-color-${status})`,
30 backgroundColor: `var(--block-color-${status}-bg)`,
31 }
32 : {
33 color: `var(--status-${status})`,
34 border: `1px solid var(--status-${status})`,
35 }
36 }
37 {...props}
38 />
39 );
40}
41