34 lines
1.1 KiB
JavaScript
34 lines
1.1 KiB
JavaScript
import React from 'react'
|
|
|
|
const TONES = {
|
|
pending: 'border-white/10 bg-white/[0.05] text-slate-200',
|
|
queued: 'border-sky-300/20 bg-sky-400/12 text-sky-100',
|
|
processing: 'border-violet-300/20 bg-violet-400/12 text-violet-100',
|
|
completed: 'border-emerald-300/20 bg-emerald-400/12 text-emerald-100',
|
|
failed: 'border-rose-300/20 bg-rose-400/12 text-rose-100',
|
|
cancelled: 'border-amber-300/20 bg-amber-400/12 text-amber-100',
|
|
expired: 'border-white/10 bg-white/[0.05] text-slate-300',
|
|
unknown: 'border-white/10 bg-white/[0.04] text-slate-300',
|
|
}
|
|
|
|
const LABELS = {
|
|
pending: 'Pending',
|
|
queued: 'Queued',
|
|
processing: 'Processing',
|
|
completed: 'Completed',
|
|
failed: 'Failed',
|
|
cancelled: 'Cancelled',
|
|
expired: 'Expired',
|
|
}
|
|
|
|
export default function EnhanceStatusBadge({ status, className = '' }) {
|
|
const key = String(status || '').toLowerCase()
|
|
const tone = TONES[key] || TONES.unknown
|
|
const label = LABELS[key] || 'Unknown'
|
|
|
|
return (
|
|
<span className={`inline-flex items-center rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] ${tone} ${className}`.trim()}>
|
|
{label}
|
|
</span>
|
|
)
|
|
} |