38 lines
962 B
TypeScript
38 lines
962 B
TypeScript
import React from 'react';
|
|
import { Grid } from './Grid';
|
|
import { StatBox, StatBoxProps } from './StatBox';
|
|
import { StatCard, StatCardProps } from './StatCard';
|
|
|
|
export interface StatGridProps {
|
|
stats: (StatBoxProps | StatCardProps)[];
|
|
columns?: number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number };
|
|
variant?: 'box' | 'card';
|
|
cardVariant?: 'default' | 'dark' | 'muted' | 'glass' | 'outline';
|
|
font?: 'sans' | 'mono';
|
|
}
|
|
|
|
export const StatGrid = ({
|
|
stats,
|
|
columns = 3,
|
|
variant = 'box',
|
|
cardVariant,
|
|
font
|
|
}: StatGridProps) => {
|
|
return (
|
|
<Grid cols={columns} gap={4}>
|
|
{stats.map((stat, index) => (
|
|
variant === 'box' ? (
|
|
<StatBox key={index} {...(stat as StatBoxProps)} />
|
|
) : (
|
|
<StatCard
|
|
key={index}
|
|
variant={cardVariant}
|
|
font={font}
|
|
{...(stat as StatCardProps)}
|
|
/>
|
|
)
|
|
))}
|
|
</Grid>
|
|
);
|
|
};
|