30 lines
1022 B
TypeScript
30 lines
1022 B
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
|
|
interface BadgeProps {
|
|
children: React.ReactNode;
|
|
variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
|
|
className?: string;
|
|
}
|
|
|
|
export default function Badge({ children, variant = 'default', className = '' }: BadgeProps) {
|
|
const variants = {
|
|
default: 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400',
|
|
success: 'bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400',
|
|
warning: 'bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400',
|
|
error: 'bg-rose-50 text-rose-600 dark:bg-rose-500/10 dark:text-rose-400',
|
|
info: 'bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-400',
|
|
};
|
|
|
|
return (
|
|
<span className={`
|
|
px-2.5 py-0.5 rounded-full text-[10px] font-black uppercase tracking-widest inline-flex items-center
|
|
${variants[variant]}
|
|
${className}
|
|
`}>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|