feat(StatGroup): wrapper around Stat to group a list of stats
This commit is contained in:
32
src/shared/ui/Stat/StatGroup.svelte
Normal file
32
src/shared/ui/Stat/StatGroup.svelte
Normal 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>
|
||||||
Reference in New Issue
Block a user