61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import { cn } from '@/shared/lib/utils'
|
|
|
|
type StatusVariant = 'critical' | 'warning' | 'good' | 'info' | 'neutral'
|
|
|
|
const variantMap: Record<StatusVariant, string> = {
|
|
critical:
|
|
'bg-status-critical-bg text-status-critical-text border-status-critical-border',
|
|
warning:
|
|
'bg-status-warning-bg text-status-warning-text border-status-warning-border',
|
|
good:
|
|
'bg-status-good-bg text-status-good-text border-status-good-border',
|
|
info:
|
|
'bg-status-info-bg text-status-info-text border-status-info-border',
|
|
neutral:
|
|
'bg-muted text-muted-foreground border-border',
|
|
}
|
|
|
|
const dotMap: Record<StatusVariant, string> = {
|
|
critical: 'bg-status-critical-dot',
|
|
warning: 'bg-status-warning-dot',
|
|
good: 'bg-status-good-dot',
|
|
info: 'bg-status-info-dot',
|
|
neutral: 'bg-muted-foreground',
|
|
}
|
|
|
|
interface StatusBadgeProps {
|
|
variant?: StatusVariant
|
|
/** 좌측 상태 점 표시 */
|
|
withDot?: boolean
|
|
size?: 'sm' | 'md'
|
|
className?: string
|
|
children: React.ReactNode
|
|
}
|
|
|
|
export function StatusBadge({
|
|
variant = 'neutral',
|
|
withDot = false,
|
|
size = 'md',
|
|
className,
|
|
children,
|
|
}: StatusBadgeProps) {
|
|
return (
|
|
<span
|
|
className={cn(
|
|
'inline-flex items-center gap-1.5 rounded-full border font-medium whitespace-nowrap',
|
|
size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-xs',
|
|
variantMap[variant],
|
|
className,
|
|
)}
|
|
>
|
|
{withDot && (
|
|
<span
|
|
aria-hidden
|
|
className={cn('inline-block w-1.5 h-1.5 rounded-full', dotMap[variant])}
|
|
/>
|
|
)}
|
|
{children}
|
|
</span>
|
|
)
|
|
}
|