51 lines
1.8 KiB
JavaScript
51 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
|
|
export default function StatusPill({ status }) {
|
|
if (!status) return null;
|
|
|
|
const statusLower = status.toLowerCase();
|
|
let config = {
|
|
bg: 'bg-gray-50',
|
|
text: 'text-gray-700',
|
|
border: 'border-gray-100',
|
|
dot: 'bg-gray-400'
|
|
};
|
|
|
|
if (statusLower === 'active' || statusLower === 'completed' || statusLower === 'success') {
|
|
config = {
|
|
bg: 'bg-emerald-50',
|
|
text: 'text-emerald-700',
|
|
border: 'border-emerald-100',
|
|
dot: 'bg-emerald-500'
|
|
};
|
|
} else if (statusLower === 'inactive' || statusLower === 'deleted' || statusLower === 'terminated' || statusLower === 'failed' || statusLower === 'error') {
|
|
config = {
|
|
bg: 'bg-red-50',
|
|
text: 'text-red-700',
|
|
border: 'border-red-100',
|
|
dot: 'bg-red-500'
|
|
};
|
|
} else if (statusLower === 'pending' || statusLower === 'warning' || statusLower === 'on hold' || statusLower === 'processing') {
|
|
config = {
|
|
bg: 'bg-amber-50',
|
|
text: 'text-amber-700',
|
|
border: 'border-amber-100',
|
|
dot: 'bg-amber-500'
|
|
};
|
|
} else if (statusLower === 'info' || statusLower === 'processing' || statusLower === 'draft') {
|
|
config = {
|
|
bg: 'bg-blue-50',
|
|
text: 'text-blue-700',
|
|
border: 'border-blue-100',
|
|
dot: 'bg-blue-500'
|
|
};
|
|
}
|
|
|
|
return (
|
|
<span className={`inline-flex items-center gap-1.5 px-3 py-1 text-[11px] font-bold rounded-full transition-all ${config.bg} ${config.text}`}>
|
|
<span className={`w-1.5 h-1.5 rounded-full ${config.dot}`}></span>
|
|
<span className="uppercase tracking-wider">{status}</span>
|
|
</span>
|
|
);
|
|
}
|