38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
|
import { Paper, SimpleGrid, Skeleton, Stack, Text } from "@mantine/core"
|
|||
|
|
|
|||
|
|
import { DASHBOARD_CARDS } from "../../config/dashboard.config"
|
|||
|
|
import type { SummaryCardsProps } from "./types/summary-cards-props.type"
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Карточки сводных метрик dashboard.
|
|||
|
|
*
|
|||
|
|
* Используется для:
|
|||
|
|
* - отображения количества assets, presets и hosts
|
|||
|
|
* - компактного статуса загрузки данных
|
|||
|
|
*/
|
|||
|
|
export const SummaryCards = (props: SummaryCardsProps) => {
|
|||
|
|
const { isLoading, summary } = props
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<SimpleGrid cols={{ base: 1, md: 3 }} spacing="md">
|
|||
|
|
{DASHBOARD_CARDS.map((card) => (
|
|||
|
|
<Paper bg="white" key={card.title} p="xl" radius="xl" shadow="xs" withBorder>
|
|||
|
|
<Stack gap="sm">
|
|||
|
|
{isLoading ? (
|
|||
|
|
<Skeleton height={42} width={86} />
|
|||
|
|
) : (
|
|||
|
|
<Text c="violet.7" fw={850} fz={42} lh={0.9}>
|
|||
|
|
{summary[card.metric]}
|
|||
|
|
</Text>
|
|||
|
|
)}
|
|||
|
|
<Text fw={800}>{card.title}</Text>
|
|||
|
|
<Text c="dimmed" fz="sm" lh={1.55}>
|
|||
|
|
{card.description}
|
|||
|
|
</Text>
|
|||
|
|
</Stack>
|
|||
|
|
</Paper>
|
|||
|
|
))}
|
|||
|
|
</SimpleGrid>
|
|||
|
|
)
|
|||
|
|
}
|