111 lines
2.7 KiB
TypeScript
111 lines
2.7 KiB
TypeScript
|
|
|
|
import { LucideIcon } from 'lucide-react';
|
|
import React from 'react';
|
|
import { Box } from './primitives/Box';
|
|
import { Text } from './Text';
|
|
import { Icon } from './Icon';
|
|
|
|
interface StatusIndicatorProps {
|
|
icon: LucideIcon;
|
|
label: string;
|
|
subLabel?: string;
|
|
variant: 'success' | 'warning' | 'danger' | 'info';
|
|
}
|
|
|
|
export function StatusIndicator({ icon, label, subLabel, variant }: StatusIndicatorProps) {
|
|
const colors = {
|
|
success: {
|
|
text: 'text-performance-green',
|
|
bg: 'bg-green-500/10',
|
|
border: 'border-green-500/30',
|
|
icon: 'rgb(16, 185, 129)'
|
|
},
|
|
warning: {
|
|
text: 'text-warning-amber',
|
|
bg: 'bg-yellow-500/10',
|
|
border: 'border-yellow-500/30',
|
|
icon: 'rgb(245, 158, 11)'
|
|
},
|
|
danger: {
|
|
text: 'text-red-400',
|
|
bg: 'bg-red-500/10',
|
|
border: 'border-red-500/30',
|
|
icon: 'rgb(239, 68, 68)'
|
|
},
|
|
info: {
|
|
text: 'text-primary-blue',
|
|
bg: 'bg-blue-500/10',
|
|
border: 'border-blue-500/30',
|
|
icon: 'rgb(59, 130, 246)'
|
|
}
|
|
};
|
|
|
|
const config = colors[variant];
|
|
|
|
return (
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="between"
|
|
p={2}
|
|
rounded="lg"
|
|
bg={config.bg}
|
|
border
|
|
borderColor={config.border}
|
|
>
|
|
<Box display="flex" alignItems="center" gap={2}>
|
|
<Icon icon={icon} size={4} color={config.icon} />
|
|
<Text size="sm" weight="semibold" color="text-white">{label}</Text>
|
|
</Box>
|
|
{subLabel && (
|
|
<Text size="xs" color="text-gray-400">
|
|
{subLabel}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
interface StatRowProps {
|
|
label: string;
|
|
value: string | number;
|
|
valueColor?: string;
|
|
valueFont?: 'sans' | 'mono';
|
|
}
|
|
|
|
export function StatRow({ label, value, valueColor = 'text-white', valueFont = 'sans' }: StatRowProps) {
|
|
return (
|
|
<Box display="flex" alignItems="center" justifyContent="between">
|
|
<Text size="xs" color="text-gray-500">{label}</Text>
|
|
<Text size="xs" weight="bold" color={valueColor} font={valueFont}>
|
|
{value}
|
|
</Text>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
interface BadgeProps {
|
|
children: React.ReactNode;
|
|
variant: 'success' | 'warning' | 'danger' | 'info' | 'gray';
|
|
size?: 'xs' | 'sm';
|
|
}
|
|
|
|
export function Badge({ children, variant, size = 'xs' }: BadgeProps) {
|
|
const variants = {
|
|
success: 'bg-green-500/20 text-performance-green',
|
|
warning: 'bg-yellow-500/20 text-warning-amber',
|
|
danger: 'bg-red-500/20 text-red-400',
|
|
info: 'bg-blue-500/20 text-primary-blue',
|
|
gray: 'bg-gray-500/20 text-gray-400'
|
|
};
|
|
|
|
return (
|
|
<Box px={1} rounded="sm" bg={variants[variant]}>
|
|
<Text size={size} color="inherit">
|
|
{children}
|
|
</Text>
|
|
</Box>
|
|
);
|
|
}
|