39 lines
829 B
Svelte
39 lines
829 B
Svelte
<!--
|
|
Component: StatGroup
|
|
Renders multiple Stat components in a row with auto-separators.
|
|
-->
|
|
<script lang="ts">
|
|
import { Stat } from '$shared/ui';
|
|
import clsx from 'clsx';
|
|
import type { ComponentProps } from 'svelte';
|
|
|
|
interface StatItem extends Partial<Pick<ComponentProps<typeof Stat>, 'variant'>> {
|
|
label: string;
|
|
value: string | number;
|
|
}
|
|
|
|
interface Props {
|
|
/**
|
|
* Stats array
|
|
*/
|
|
stats: StatItem[];
|
|
/**
|
|
* CSS classes
|
|
*/
|
|
class?: string;
|
|
}
|
|
|
|
let { stats, class: className }: Props = $props();
|
|
</script>
|
|
|
|
<div class={clsx('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>
|