36 lines
1010 B
TypeScript
36 lines
1010 B
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
import { Card } from './Card';
|
|
import { Text } from './Text';
|
|
|
|
export interface QuickStatItemProps {
|
|
label: string;
|
|
value: string | number;
|
|
}
|
|
|
|
export const QuickStatItem = ({ label, value }: QuickStatItemProps) => (
|
|
<Box textAlign="center" paddingX={4}>
|
|
<Text size="2xl" weight="bold" variant="high">{value}</Text>
|
|
<Text size="xs" variant="low" uppercase>{label}</Text>
|
|
</Box>
|
|
);
|
|
|
|
export interface QuickStatCardProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export const QuickStatCard = ({ children }: QuickStatCardProps) => {
|
|
return (
|
|
<Card variant="glass">
|
|
<Box display="flex" alignItems="center" padding={6}>
|
|
{React.Children.map(children, (child, index) => (
|
|
<React.Fragment key={index}>
|
|
{index > 0 && <Box width="1px" height="2.5rem" bg="var(--ui-color-border-muted)" style={{ opacity: 0.2 }} />}
|
|
{child}
|
|
</React.Fragment>
|
|
))}
|
|
</Box>
|
|
</Card>
|
|
);
|
|
};
|