Something went wrong. Try again.
Monorepo for Tangled forked from tangled.org/core
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110<script module lang="ts"> export const stageLabel = (status: string): string => status === "queued" ? "Queued" : status === "cloning" ? "Cloning" : status === "importing" ? "Importing" : status.charAt(0).toUpperCase() + status.slice(1).replaceAll("_", " ");</script>
<script lang="ts"> import type { Snippet } from "svelte"; import type { ResolvedPathname } from "$app/types"; import ArrowUpRight from "$icon/arrow-up-right"; import Check from "$icon/check"; import Download from "$icon/download"; import ExternalLink from "$icon/external-link"; import X from "$icon/x"; import Button from "#lib/components/ui/Button.svelte"; import Spinner from "#lib/components/ui/Spinner.svelte";
interface Props { percent?: number; stage?: string; label: string; state: "running" | "done" | "failed"; eta?: string; href?: ResolvedPathname; logsHref?: ResolvedPathname; error?: Snippet; action?: Snippet; }
let { label, percent, state, stage, eta, href, logsHref, error, action }: Props = $props();
const barPercent = $derived( percent === undefined ? null : state === "done" ? 100 : Math.max(0, Math.min(100, percent)) );</script>
<div class="rounded-md border border-border-default p-3 typography-paragraph-small"> <div class="flex flex-wrap items-center gap-x-2 gap-y-1"> <span class="flex min-w-0 grow basis-48 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 wrap-anywhere">{label}</strong> {#if state === "running"} {#if stage} <span class="shrink-0 text-foreground-muted">{stage}</span> {/if} <Spinner class="size-3.5 shrink-0" /> {:else if state === "done"} <span class="shrink-0 text-foreground-muted">{barPercent ?? 100}%</span> {/if} </span> <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 class="text-foreground-muted">Done</span> {#if href} <Button icon={ArrowUpRight} iconSide="right" {href}>Open</Button> {/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} {@render action?.()} </span> </div> {#if state === "failed"} {#if error} <div class="mt-2">{@render error()}</div> {/if} {:else} <div class="mt-2 h-1.5 overflow-hidden rounded-full bg-background-inset {barPercent === null ? 'animate-pulse motion-reduce:animate-none' : ''}" role="progressbar" aria-label="{label} migration" aria-valuenow={barPercent ?? undefined} aria-valuetext={state === "done" ? "Done" : (stage ?? "In progress")} aria-valuemin={0} aria-valuemax={100} > {#if barPercent !== null} <div class="h-full rounded-full {state === 'done' ? 'bg-foreground-success' : 'bg-foreground-muted'}" style="width: {barPercent}%" ></div> {/if} </div> {/if}</div>