alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { tv, type VariantProps } from "tailwind-variants";
3
4 export const issueStatePill = tv({
5 base: "inline-flex items-center gap-1.5 rounded px-2 py-[5px] text-sm text-foreground-on-emphasis select-none",
6 variants: {
7 state: {
8 open: "bg-background-success-emphasis",
9 closed: "bg-foreground-muted"
10 }
11 },
12 defaultVariants: {
13 state: "open"
14 }
15 });
16
17 export type IssueStatePillVariants = VariantProps<typeof issueStatePill>;
18</script>
19
20<script lang="ts">
21 import CircleDot from "$icon/circle-dot";
22 import CircleX from "$icon/circle-x";
23
24 interface Props {
25 state: IssueStatePillVariants["state"];
26 class?: string;
27 }
28
29 let { state = "open", class: className }: Props = $props();
30
31 const Icon = $derived(state === "closed" ? CircleX : CircleDot);
32 const label = $derived(state === "closed" ? "Closed" : "Open");
33</script>
34
35<span class={issueStatePill({ state, class: className })}>
36 <Icon class="size-3 shrink-0" aria-hidden="true" />
37 {label}
38</span>