alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import type { Component } from "svelte";
3 import type { SvelteHTMLElements } from "svelte/elements";
4 import { tv, type VariantProps } from "tailwind-variants";
5 import Check from "$icon/check";
6 import CircleDashed from "$icon/circle-dashed";
7 import CircleSlash from "$icon/circle-slash";
8 import ClockAlert from "$icon/clock-alert";
9 import RefreshCw from "$icon/refresh-cw";
10 import X from "$icon/x";
11 import type { PipelineStatus } from "$lib/components/repo/types";
12
13 /** same icon per status as the appview's workflowSymbol fragment */
14 export const STATUS_ICONS: Record<PipelineStatus, Component<SvelteHTMLElements["svg"]>> = {
15 pending: CircleDashed,
16 running: RefreshCw,
17 success: Check,
18 failed: X,
19 timeout: ClockAlert,
20 cancelled: CircleSlash
21 };
22
23 // leave `status` off to let the icon inherit its colour, e.g. inside a Tag
24 export const pipelineStatusIcon = tv({
25 base: "size-3 shrink-0",
26 variants: {
27 status: {
28 pending: "text-foreground-muted",
29 running: "text-foreground-warning",
30 success: "text-foreground-success",
31 failed: "text-foreground-danger",
32 timeout: "text-foreground-warning",
33 cancelled: "text-foreground-muted"
34 }
35 }
36 });
37
38 export type PipelineStatusIconVariants = VariantProps<typeof pipelineStatusIcon>;
39</script>
40
41<script lang="ts">
42 interface Props {
43 status: PipelineStatus;
44 /** colour the icon itself; off inside a Tag */
45 colored?: boolean;
46 class?: string;
47 }
48
49 let { status, colored = false, class: className }: Props = $props();
50
51 const Icon = $derived(STATUS_ICONS[status]);
52 const classes = $derived(
53 pipelineStatusIcon({ status: colored ? status : undefined, class: className })
54 );
55</script>
56
57<Icon class={classes} aria-hidden="true" />