Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
at icy/tmrrpn
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<script module lang="ts"> import { tv, type VariantProps } from "tailwind-variants";
export const pullStatePill = tv({ base: "inline-flex items-center gap-1 rounded-sm px-2 py-1 typography-paragraph-small text-foreground-on-emphasis select-none", variants: { state: { open: "bg-background-success-emphasis", merged: "bg-background-info-emphasis", closed: "bg-background-emphasis dark:bg-background-subtle" } }, defaultVariants: { state: "open" } });
export type PullStatePillVariants = VariantProps<typeof pullStatePill>; export type PullState = NonNullable<PullStatePillVariants["state"]>;</script>
<script lang="ts"> import GitMerge from "$icon/git-merge"; import GitPullRequest from "$icon/git-pull-request"; import GitPullRequestClosed from "$icon/git-pull-request-closed";
interface Props { state: PullStatePillVariants["state"]; class?: string; }
let { state = "open", class: className }: Props = $props();
const icons = { open: GitPullRequest, merged: GitMerge, closed: GitPullRequestClosed }; const labels = { open: "Open", merged: "Merged", closed: "Closed" };
const Icon = $derived(icons[state ?? "open"]);</script>
<span class={pullStatePill({ state, class: className })}> <Icon class="size-3 shrink-0" aria-hidden="true" /> <span>{labels[state ?? "open"]}</span></span>