58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { Box, Flex, Text, Tooltip, VisuallyHidden } from "@mantine/core";
|
|
import { useElementSize } from "@mantine/hooks";
|
|
|
|
import { useRequiredBoard } from "@homarr/boards/context";
|
|
import type { TablerIcon } from "@homarr/ui";
|
|
|
|
export interface SpeedStatCardProps {
|
|
icon: TablerIcon;
|
|
color: string;
|
|
value: string;
|
|
label: string;
|
|
compact?: boolean;
|
|
}
|
|
|
|
export function SpeedStatCard({ icon: Icon, color, value, label, compact = false }: SpeedStatCardProps) {
|
|
const { ref, height, width } = useElementSize<HTMLDivElement>();
|
|
const board = useRequiredBoard();
|
|
const isWide = width > height + 20;
|
|
const hideLabel = height > 0 && height <= 38;
|
|
|
|
return (
|
|
<Tooltip label={`${label}: ${value}`} withArrow>
|
|
<Box
|
|
ref={ref}
|
|
p={compact ? "xs" : "sm"}
|
|
bg={`var(--mantine-color-${color}-light)`}
|
|
h="100%"
|
|
style={{ flex: 1, borderRadius: `var(--mantine-radius-${board.itemRadius})`, minWidth: 0 }}
|
|
>
|
|
<Flex
|
|
h="100%"
|
|
w="100%"
|
|
align="center"
|
|
justify="center"
|
|
direction={isWide ? "row" : "column"}
|
|
gap={isWide ? 8 : 4}
|
|
style={{ minWidth: 0 }}
|
|
>
|
|
<Icon size={compact ? 16 : 20} color={`var(--mantine-color-${color}-5)`} style={{ flexShrink: 0 }} />
|
|
<Flex direction="column" align={isWide ? "flex-start" : "center"} gap={0} style={{ minWidth: 0 }}>
|
|
<Text size={compact ? "sm" : "md"} fw={700} ta="center" lh={1.1} truncate w="100%">
|
|
{value}
|
|
</Text>
|
|
{!hideLabel && (
|
|
<Text size="xs" c="dimmed" ta="center" lh={1.3} truncate w="100%">
|
|
{label}
|
|
</Text>
|
|
)}
|
|
{hideLabel && <VisuallyHidden>{label}</VisuallyHidden>}
|
|
</Flex>
|
|
</Flex>
|
|
</Box>
|
|
</Tooltip>
|
|
);
|
|
}
|