akukanara
33 lines
1.4 KiB
TypeScript
33 lines
1.4 KiB
TypeScript
import * as React from "react";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
variant?: 'default' | 'secondary' | 'outline' | 'success' | 'warning' | 'danger' | 'info';
|
|
}
|
|
|
|
const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
|
|
({ className, variant = "default", ...props }, ref) => {
|
|
return (
|
|
<span
|
|
ref={ref}
|
|
className={twMerge(
|
|
"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold select-none border tracking-wide uppercase",
|
|
variant === 'default' && "bg-[var(--accent-color)] text-white border-transparent",
|
|
variant === 'secondary' && "bg-[var(--accent-soft)] text-[var(--accent-text)] border-transparent",
|
|
variant === 'success' && "bg-[#10b981]/10 text-[#059669] border-[#10b981]/20",
|
|
variant === 'warning' && "bg-amber-500/10 text-amber-700 border-amber-500/20",
|
|
variant === 'danger' && "bg-red-500/10 text-red-700 border-red-500/20",
|
|
variant === 'info' && "bg-sky-500/10 text-sky-700 border-sky-500/20",
|
|
variant === 'outline' && "text-zinc-600 dark:text-zinc-400 border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
);
|
|
Badge.displayName = "Badge";
|
|
|
|
export { Badge };
|
|
export default Badge;
|