feat(StatGroup): wrapper around Stat to group a list of stats

This commit is contained in:
Ilia Mashkov
2026-02-24 18:03:40 +03:00
parent 043db46eaf
commit 7cb9ae9ede

View File

@@ -0,0 +1,32 @@
<!--
Component: StatGroup
Renders multiple Stat components in a row with auto-separators.
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { Stat } from '$shared/ui';
import type { ComponentProps } from 'svelte';
interface StatItem extends Partial<Pick<ComponentProps<typeof Stat>, 'variant'>> {
label: string;
value: string | number;
}
interface Props {
stats: StatItem[];
class?: string;
}
let { stats, class: className }: Props = $props();
</script>
<div class={cn('flex items-center gap-4', className)}>
{#each stats as stat, i}
<Stat
label={stat.label}
value={stat.value}
variant={stat.variant}
separator={i < stats.length - 1}
/>
{/each}
</div>