31 lines
1.1 KiB
Svelte
31 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
interface Props {
|
|
status: 'queued' | 'running' | 'paused' | 'cancelled' | 'done' | 'failed';
|
|
spinning?: boolean;
|
|
}
|
|
|
|
let { status, spinning = false }: Props = $props();
|
|
|
|
const statusConfig: Record<typeof status, { bg: string; text: string; label: string }> = {
|
|
queued: { bg: 'bg-blue-100', text: 'text-blue-800', label: 'Queued' },
|
|
running: { bg: 'bg-yellow-100', text: 'text-yellow-800', label: 'Running' },
|
|
paused: { bg: 'bg-orange-100', text: 'text-orange-800', label: 'Paused' },
|
|
cancelled: { bg: 'bg-gray-100', text: 'text-gray-800', label: 'Cancelled' },
|
|
done: { bg: 'bg-green-100', text: 'text-green-800', label: 'Done' },
|
|
failed: { bg: 'bg-red-100', text: 'text-red-800', label: 'Failed' }
|
|
};
|
|
|
|
const config = $derived(statusConfig[status]);
|
|
</script>
|
|
|
|
<span
|
|
class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {config.bg} {config.text}"
|
|
>
|
|
{config.label}
|
|
{#if spinning}
|
|
<span
|
|
class="ml-1 inline-block h-3 w-3 animate-spin rounded-full border-2 border-current border-r-transparent"
|
|
></span>
|
|
{/if}
|
|
</span>
|