Ilia Mashkov
47 lines
948 B
Svelte
47 lines
948 B
Svelte
<!--
|
|
Component: Stat
|
|
A single key:value pair in Space Mono. Optional trailing divider.
|
|
-->
|
|
<script lang="ts">
|
|
import { cn } from '$shared/lib';
|
|
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}
|