34 lines
930 B
TypeScript
34 lines
930 B
TypeScript
import { clsx } from 'clsx'
|
|
|
|
type Status = 'running' | 'stopped' | 'unknown'
|
|
|
|
const statusStyles: Record<Status, string> = {
|
|
running: 'bg-green-500/20 text-green-400 border-green-500/30',
|
|
stopped: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
|
|
unknown: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
|
|
}
|
|
|
|
interface StatusBadgeProps {
|
|
status: Status
|
|
label?: string
|
|
}
|
|
|
|
export function StatusBadge({ status, label }: StatusBadgeProps) {
|
|
return (
|
|
<span
|
|
className={clsx(
|
|
'inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium border',
|
|
statusStyles[status]
|
|
)}
|
|
>
|
|
<span className={clsx(
|
|
'w-1.5 h-1.5 rounded-full',
|
|
status === 'running' && 'bg-green-400 animate-pulse',
|
|
status === 'stopped' && 'bg-gray-400',
|
|
status === 'unknown' && 'bg-yellow-400 animate-pulse'
|
|
)} />
|
|
{label || status}
|
|
</span>
|
|
)
|
|
}
|