VibeCodingStudio/anycoder-2744f144

1import { clsx } from 'clsx';2 3const statusConfig = {4  running: { bg: 'bg-emerald-500/15', text: 'text-emerald-400', dot: 'bg-emerald-400' },5  active: { bg: 'bg-emerald-500/15', text: 'text-emerald-400', dot: 'bg-emerald-400' },6  available: { bg: 'bg-emerald-500/15', text: 'text-emerald-400', dot: 'bg-emerald-400' },7  idle: { bg: 'bg-amber-500/15', text: 'text-amber-400', dot: 'bg-amber-400' },8  standby: { bg: 'bg-slate-500/15', text: 'text-slate-400', dot: 'bg-slate-400' },9  degraded: { bg: 'bg-amber-500/15', text: 'text-amber-400', dot: 'bg-amber-400' },10  provisioning: { bg: 'bg-cyan-500/15', text: 'text-cyan-400', dot: 'bg-cyan-400' },11  stopped: { bg: 'bg-red-500/15', text: 'text-red-400', dot: 'bg-red-400' },12  queued: { bg: 'bg-purple-500/15', text: 'text-purple-400', dot: 'bg-purple-400' },13  waiting: { bg: 'bg-amber-500/15', text: 'text-amber-400', dot: 'bg-amber-400' },14  completed: { bg: 'bg-slate-500/15', text: 'text-slate-400', dot: 'bg-slate-400' },15};16 17export default function StatusBadge({ status, size = 'sm' }) {18  const config = statusConfig[status] || statusConfig.idle;19  const sizeClasses = size === 'sm' ? 'text-xs px-2 py-0.5' : 'text-sm px-3 py-1';20  const dotSize = size === 'sm' ? 'w-1.5 h-1.5' : 'w-2 h-2';21 22  return (23    <span className={clsx(24      'inline-flex items-center gap-1.5 rounded-full font-medium',25      config.bg, config.text, sizeClasses26    )}>27      <span className={clsx('rounded-full animate-pulse-slow', config.dot, dotSize)} />28      {status}29    </span>30  );31}