Monorepo for Tangled
Something went wrong. Try again.
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364<script module lang="ts"> import { tv, type VariantProps } from "tailwind-variants";
export const diffStatPill = tv({ slots: { root: "flex items-center overflow-clip rounded-sm", insertions: "text-foreground-success select-none", deletions: "text-foreground-danger select-none" }, variants: { variant: { flat: { insertions: "p-3xs", deletions: "p-3xs" }, background: { insertions: "bg-background-success-subtle px-2xs py-3xs", deletions: "bg-background-danger-subtle px-2xs py-3xs" } }, size: { small: { root: "typography-monospace-small" }, regular: { root: "typography-monospace-regular" } } }, defaultVariants: { variant: "background", size: "regular" } });
export type DiffStatPillVariants = VariantProps<typeof diffStatPill>;</script>
<script lang="ts"> import type { LineStat } from "$lib/api/diff";
interface Props { stat: LineStat; class?: string; size?: DiffStatPillVariants["size"]; variant?: DiffStatPillVariants["variant"]; }
let { stat, class: className = "", size, variant }: Props = $props();
const style = $derived(diffStatPill({ variant, size }));</script>
{#if stat.insertions > 0 || stat.deletions > 0} <div class={style.root({ class: className })}> {#if stat.insertions > 0} <span class={style.insertions()}> +{stat.insertions} </span> {/if} {#if stat.deletions > 0} <span class={style.deletions()}> -{stat.deletions} </span> {/if} </div>{/if}