57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { Box } from './primitives/Box';
|
|
import { Text } from './Text';
|
|
import { Surface } from './primitives/Surface';
|
|
import { Icon } from './Icon';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface SummaryItemProps {
|
|
label?: string;
|
|
value?: string | number;
|
|
icon?: LucideIcon;
|
|
onClick?: () => void;
|
|
title?: string;
|
|
subtitle?: string;
|
|
rightContent?: React.ReactNode;
|
|
}
|
|
|
|
export function SummaryItem({ label, value, icon, onClick, title, subtitle, rightContent }: SummaryItemProps) {
|
|
return (
|
|
<Surface
|
|
variant="muted"
|
|
rounded="lg"
|
|
p={4}
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={4}
|
|
cursor={onClick ? 'pointer' : 'default'}
|
|
onClick={onClick}
|
|
hoverBg={onClick ? 'bg-white/5' : undefined}
|
|
transition={!!onClick}
|
|
>
|
|
{icon && (
|
|
<Box p={2} rounded="lg" bg="bg-white/5">
|
|
<Icon icon={icon} size={5} color="text-gray-400" />
|
|
</Box>
|
|
)}
|
|
<Box flex={1}>
|
|
{(label || title) && (
|
|
<Text size="xs" color="text-gray-500" uppercase letterSpacing="wider" block>
|
|
{label || title}
|
|
</Text>
|
|
)}
|
|
{(value || subtitle) && (
|
|
<Text size="lg" weight="bold" color="text-white" block>
|
|
{value || subtitle}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
{rightContent && (
|
|
<Box>
|
|
{rightContent}
|
|
</Box>
|
|
)}
|
|
</Surface>
|
|
);
|
|
}
|