61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import { cn } from '@/lib/utils'
|
|
import { CheckCircle, Square, Pause, Clock, XCircle } from 'lucide-react'
|
|
|
|
type BadgeStatus = 'running' | 'stopped' | 'paused' | 'suspended' | 'online' | 'offline'
|
|
|
|
interface StatusBadgeProps {
|
|
status: BadgeStatus
|
|
className?: string
|
|
}
|
|
|
|
const statusConfig: Record<BadgeStatus, { label: string; color: string; icon: React.ComponentType<{ className?: string }> }> = {
|
|
running: {
|
|
label: 'Running',
|
|
color: 'border-success/25 bg-success/10 text-success',
|
|
icon: CheckCircle,
|
|
},
|
|
stopped: {
|
|
label: 'Stopped',
|
|
color: 'border-border bg-muted/60 text-muted-foreground',
|
|
icon: Square,
|
|
},
|
|
paused: {
|
|
label: 'Paused',
|
|
color: 'border-warning/25 bg-warning/10 text-warning',
|
|
icon: Pause,
|
|
},
|
|
suspended: {
|
|
label: 'Suspended',
|
|
color: 'border-warning/25 bg-warning/10 text-warning',
|
|
icon: Clock,
|
|
},
|
|
online: {
|
|
label: 'Online',
|
|
color: 'border-success/25 bg-success/10 text-success',
|
|
icon: CheckCircle,
|
|
},
|
|
offline: {
|
|
label: 'Offline',
|
|
color: 'border-destructive/25 bg-destructive/10 text-destructive',
|
|
icon: XCircle,
|
|
},
|
|
}
|
|
|
|
export function StatusBadge({ status, className }: StatusBadgeProps) {
|
|
const config = statusConfig[status]
|
|
const Icon = config.icon
|
|
|
|
return (
|
|
<span
|
|
className={cn(
|
|
'inline-flex items-center gap-1.5 rounded-sm border px-2 py-0.5 text-xs font-medium',
|
|
config.color,
|
|
className
|
|
)}
|
|
>
|
|
<Icon className="h-3 w-3" />
|
|
{config.label}
|
|
</span>
|
|
)
|
|
}
|