Something went wrong. Try again.
Monorepo for Tangled forked from tangled.org/core
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233<script lang="ts"> import type { Snippet } from "svelte"; import Circle from "$icon/circle"; import CircleCheck from "$icon/circle-check"; import LoaderCircle from "$icon/loader-circle"; import type { StepState } from "#lib/components/landing/features/ci.svelte.ts";
/* * One workflow step: its mark (waiting, spinning, ticked off with a pop) and its name, with * anything after it. Sized by the visual through * --step-size and --step-gap (ci.css). */ interface Props { name: string; state: StepState; /** Extra class, for the visual's own layout and entrance. */ class?: string; /** Row index, for a staggered entrance. */ i?: number; children?: Snippet; }
let { name, state, class: className, i, children }: Props = $props();
const Mark = $derived({ "": Circle, run: LoaderCircle, ok: CircleCheck }[state]);</script>
<span class={["ci-step", state, className]} style:--i={i}> <Mark class="ci-mark" aria-hidden="true" /> <span class="ci-name">{name}</span> {@render children?.()}</span>