48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
/**
|
|
* Сетка карточек статистики. Переиспользуется для всех ролей.
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import React from 'react';
|
|
import { StatCard } from '../StatCard';
|
|
|
|
export interface StatsGridItem {
|
|
title: string;
|
|
value: string | number;
|
|
icon?: React.ReactNode;
|
|
trend?: { value: number; isPositive: boolean };
|
|
subtitle?: string;
|
|
loading?: boolean;
|
|
}
|
|
|
|
export interface StatsGridProps {
|
|
items: StatsGridItem[];
|
|
}
|
|
|
|
export const StatsGrid: React.FC<StatsGridProps> = ({ items }) => {
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'grid',
|
|
// Для дашборда ментора: 4 карточки в один ряд,
|
|
// чтобы верхняя строка занимала всю ширину.
|
|
gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
|
|
gap: 'var(--ios26-spacing)',
|
|
}}
|
|
>
|
|
{items.map((item, i) => (
|
|
<StatCard
|
|
key={i}
|
|
title={item.title}
|
|
value={item.value}
|
|
icon={item.icon}
|
|
trend={item.trend}
|
|
subtitle={item.subtitle}
|
|
loading={item.loading}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|