frontend-svelte/src/shared/ui/Stat/Stat.svelte

<!--
    Component: Stat
    A single key:value pair in Space Mono. Optional trailing divider.
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { Label } from '$shared/ui';
import type { ComponentProps } from 'svelte';

interface Props extends Pick<ComponentProps<typeof Label>, 'variant'> {
    /**
     * Stat label
     */
    label: string;
    /**
     * Stat value
     */
    value: string | number;
    /**
     * Show separator
     * @default false
     */
    separator?: boolean;
    /**
     * CSS classes
     */
    class?: string;
}

let {
    label,
    value,
    variant = 'default',
    separator = false,
    class: className,
}: Props = $props();
</script>

<div class={cn('flex items-center gap-1', className)}>
    <Label variant="muted" size="xs">{label}:</Label>
    <Label {variant} size="xs" bold>{value}</Label>
</div>

{#if separator}
    <div class="w-px h-2 bg-black/10 dark:bg-white/10"></div>
{/if}