32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
type Variant = "gold" | "blue" | "green" | "dark" | "light";
|
|
|
|
interface BadgeProps {
|
|
variant?: Variant;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const variants: Record<Variant, string> = {
|
|
gold: "bg-[var(--color-moy-gold-faint)] text-[var(--color-moy-gold-dark)] border border-[var(--color-moy-gold-subtle)]",
|
|
blue: "bg-[var(--color-moy-blue)]/10 text-[var(--color-moy-blue)] border border-[var(--color-moy-blue)]/20",
|
|
green: "bg-[var(--color-moy-green)]/10 text-[var(--color-moy-green)] border border-[var(--color-moy-green)]/20",
|
|
dark: "bg-[var(--color-moy-dark)] text-white border border-[var(--color-moy-dark-border)]",
|
|
light: "bg-white text-[var(--color-moy-dark)] border border-gray-200",
|
|
};
|
|
|
|
export function Badge({ variant = "gold", children, className }: BadgeProps) {
|
|
return (
|
|
<span
|
|
className={cn(
|
|
"inline-flex items-center px-3 py-1 text-[10px] font-medium uppercase tracking-[0.18em] rounded-full",
|
|
variants[variant],
|
|
className
|
|
)}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|