Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596<script module lang="ts"> export const stageLabel = (status: string): string | undefined => status === "queued" ? "Queued" : status === "cloning" ? "Cloning" : status === "importing" ? "Importing" : undefined;</script>
<script lang="ts"> import Check from "$icon/check"; import Download from "$icon/download"; import ExternalLink from "$icon/external-link"; import X from "$icon/x"; import Spinner from "$lib/components/ui/Spinner.svelte";
interface Props { percent?: number; stage?: string; label: string; state: "running" | "done" | "failed"; eta?: string; href?: string; logsHref?: string; }
let { label, percent, state, stage, eta, href, logsHref }: Props = $props();
const barPercent = $derived( percent === undefined ? null : state === "done" ? 100 : Math.max(0, Math.min(100, percent)) );</script>
<div class="rounded-sm border border-border-default p-3 typography-paragraph-small"> <div class="flex items-center gap-2"> {#if state === "running"} <Download class="size-4 shrink-0 text-foreground-muted" aria-hidden="true" /> {:else if state === "done"} <Check class="size-4 shrink-0 text-foreground-success" aria-hidden="true" /> {:else} <X class="size-4 shrink-0 text-foreground-danger" aria-hidden="true" /> {/if} <strong class="min-w-0 break-all">{label}</strong> {#if state === "running"} {#if stage} <span class="text-foreground-muted">{stage}</span> {/if} <Spinner class="size-3.5" /> {:else if state === "done"} <span class="text-foreground-muted">{barPercent ?? 100}%</span> {/if} <span class="ml-auto flex shrink-0 items-center gap-3"> {#if state === "running"} {#if eta} <span class="text-foreground-muted">{eta}</span> {/if} {:else if state === "done"} <span>Done</span> {#if href} <a class="flex items-center gap-1" {href}> Open<ExternalLink class="size-3.5" aria-hidden="true" /> </a> {/if} {:else} <span class="text-foreground-danger">Failed</span> {#if logsHref} <a class="flex items-center gap-1 text-foreground-danger" href={logsHref}> View import logs<ExternalLink class="size-3.5" aria-hidden="true" /> </a> {/if} {/if} </span> </div> <div class="mt-2 h-1.5 overflow-hidden rounded-full bg-background-inset {barPercent === null && state === 'running' ? 'animate-pulse' : ''}" role="progressbar" aria-valuenow={barPercent ?? undefined} aria-valuemin={0} aria-valuemax={100} > {#if barPercent !== null} <div class="h-full rounded-full {state === 'failed' ? 'bg-foreground-danger' : 'bg-foreground-muted'}" style="width: {barPercent}%" ></div> {/if} </div></div>