34 lines
1.3 KiB
TypeScript
34 lines
1.3 KiB
TypeScript
import { LucideIcon } from 'lucide-react';
|
|
import { Box } from './Box';
|
|
import { Icon } from './Icon';
|
|
import { Text } from './Text';
|
|
|
|
export interface NotificationStatProps {
|
|
label: string;
|
|
value: string | number;
|
|
intent?: 'primary' | 'success' | 'critical' | 'low';
|
|
}
|
|
|
|
export const NotificationStat = ({ label, value, intent = 'low' }: NotificationStatProps) => (
|
|
<Box bg="var(--ui-color-bg-base)" padding={4} style={{ border: '1px solid var(--ui-color-border-default)', borderRadius: 'var(--ui-radius-sm)' }}>
|
|
<Text size="xs" variant="low" weight="bold" uppercase block>{label}</Text>
|
|
<Text size="2xl" weight="bold" variant={intent} block>{value}</Text>
|
|
</Box>
|
|
);
|
|
|
|
export interface NotificationDeadlineProps {
|
|
label: string;
|
|
deadline: string;
|
|
icon: LucideIcon;
|
|
}
|
|
|
|
export const NotificationDeadline = ({ label, deadline, icon }: NotificationDeadlineProps) => (
|
|
<Box marginTop={6} display="flex" alignItems="center" gap={3} paddingX={4} paddingY={3} bg="rgba(255, 190, 77, 0.05)" style={{ border: '1px solid rgba(255, 190, 77, 0.2)', borderRadius: 'var(--ui-radius-sm)' }}>
|
|
<Icon icon={icon} size={5} intent="warning" />
|
|
<Box>
|
|
<Text size="sm" weight="bold" variant="warning" block uppercase>{label}</Text>
|
|
<Text size="xs" variant="low" block>{deadline}</Text>
|
|
</Box>
|
|
</Box>
|
|
);
|