35 lines
865 B
Svelte
35 lines
865 B
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'> {
|
||
|
|
label: string;
|
||
|
|
value: string | number;
|
||
|
|
/** Renders a 1px vertical divider after the stat. */
|
||
|
|
separator?: boolean;
|
||
|
|
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}
|