33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import { type HTMLAttributes } from "react";
|
|
|
|
type BadgeVariant = "default" | "unit-1" | "unit-2" | "unit-3" | "unit-4" | "unit-5";
|
|
|
|
interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
variant?: BadgeVariant;
|
|
}
|
|
|
|
const variantStyles: Record<BadgeVariant, string> = {
|
|
default: "border border-border/70 bg-background text-muted",
|
|
"unit-1": "border border-unit-1/20 bg-unit-1-light text-unit-1-dark",
|
|
"unit-2": "border border-unit-2/20 bg-unit-2-light text-unit-2-dark",
|
|
"unit-3": "border border-unit-3/20 bg-unit-3-light text-unit-3-dark",
|
|
"unit-4": "border border-unit-4/20 bg-unit-4-light text-unit-4-dark",
|
|
"unit-5": "border border-unit-5/20 bg-unit-5-light text-unit-5-dark",
|
|
};
|
|
|
|
export function Badge({ variant = "default", className, children, ...props }: BadgeProps) {
|
|
return (
|
|
<span
|
|
className={cn(
|
|
"inline-flex items-center rounded-full px-3 py-1 text-xs font-extrabold tracking-wide",
|
|
variantStyles[variant],
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|