File size: 1,420 Bytes
88c4c60 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | "use client";
import { cn } from "@/shared/utils/cn";
const variants = {
default: "bg-surface-2 text-text-muted",
primary: "bg-brand-500/10 text-brand-600 dark:text-brand-300",
success: "bg-green-500/10 text-green-600 dark:text-green-400",
warning: "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
error: "bg-red-500/10 text-red-600 dark:text-red-400",
info: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
};
const sizes = {
sm: "px-2 py-0.5 text-[10px]",
md: "px-2.5 py-1 text-xs",
lg: "px-3 py-1.5 text-sm",
};
export default function Badge({
children,
variant = "default",
size = "md",
dot = false,
icon,
className,
}) {
return (
<span
className={cn(
"inline-flex items-center gap-1.5 rounded-full font-semibold",
variants[variant],
sizes[size],
className
)}
>
{dot && (
<span
className={cn(
"size-1.5 rounded-full",
variant === "success" && "bg-green-500",
variant === "warning" && "bg-yellow-500",
variant === "error" && "bg-red-500",
variant === "info" && "bg-blue-500",
variant === "primary" && "bg-brand-500",
variant === "default" && "bg-gray-500"
)}
/>
)}
{icon && <span className="material-symbols-outlined text-[14px]">{icon}</span>}
{children}
</span>
);
}
|