d47038e097
* reorganize folder structure * move folders from merge * fix import issue * run format * update configs
58 lines
1.2 KiB
TypeScript
58 lines
1.2 KiB
TypeScript
import AnimatedProcessingIcon from "../icons/animated-processing-icon";
|
|
|
|
export type Status =
|
|
| "processing"
|
|
| "active"
|
|
| "unavailable"
|
|
| "hidden"
|
|
| "sync"
|
|
| "failed";
|
|
|
|
interface StatusBadgeProps {
|
|
status: Status;
|
|
className?: string;
|
|
}
|
|
|
|
const statusConfig = {
|
|
processing: {
|
|
label: "Processing",
|
|
className: "text-muted-foreground ",
|
|
},
|
|
active: {
|
|
label: "Active",
|
|
className: "text-accent-emerald-foreground ",
|
|
},
|
|
unavailable: {
|
|
label: "Unavailable",
|
|
className: "text-accent-red-foreground ",
|
|
},
|
|
failed: {
|
|
label: "Failed",
|
|
className: "text-accent-red-foreground ",
|
|
},
|
|
hidden: {
|
|
label: "Hidden",
|
|
className: "text-muted-foreground ",
|
|
},
|
|
sync: {
|
|
label: "Sync",
|
|
className: "text-accent-amber-foreground underline",
|
|
},
|
|
};
|
|
|
|
export const StatusBadge = ({ status, className }: StatusBadgeProps) => {
|
|
const config = statusConfig[status];
|
|
|
|
return (
|
|
<div
|
|
className={`inline-flex items-center gap-1 ${config.className} ${
|
|
className || ""
|
|
}`}
|
|
>
|
|
{status === "processing" && (
|
|
<AnimatedProcessingIcon className="text-current shrink-0" />
|
|
)}
|
|
{config.label}
|
|
</div>
|
|
);
|
|
};
|