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 pullStatePill = tv({
5 base: "inline-flex items-center gap-1 rounded-sm px-2 py-1 typography-paragraph-small text-foreground-on-emphasis select-none",
6 variants: {
7 state: {
8 open: "bg-background-success-emphasis",
9 // todo: the design system has no purple token yet, indigo is the
10 // closest thing to the appview's purple "merged"
11 merged: "bg-background-info-emphasis",
12 closed: "bg-background-emphasis",
13 abandoned: "bg-background-emphasis"
14 }
15 },
16 defaultVariants: {
17 state: "open"
18 }
19 });
20
21 export type PullStatePillVariants = VariantProps<typeof pullStatePill>;
22 export type PullState = NonNullable<PullStatePillVariants["state"]>;
23</script>
24
25<script lang="ts">
26 import Ban from "$icon/ban";
27 import GitMerge from "$icon/git-merge";
28 import GitPullRequest from "$icon/git-pull-request";
29 import GitPullRequestClosed from "$icon/git-pull-request-closed";
30
31 interface Props {
32 state: PullStatePillVariants["state"];
33 class?: string;
34 }
35
36 let { state = "open", class: className }: Props = $props();
37
38 const icons = {
39 open: GitPullRequest,
40 merged: GitMerge,
41 closed: GitPullRequestClosed,
42 abandoned: Ban
43 };
44 const labels = { open: "Open", merged: "Merged", closed: "Closed", abandoned: "Abandoned" };
45
46 const Icon = $derived(icons[state ?? "open"]);
47</script>
48
49<span class={pullStatePill({ state, class: className })}>
50 <Icon class="size-3 shrink-0" aria-hidden="true" />
51 <span>{labels[state ?? "open"]}</span>
52</span>