94 lines
2.5 KiB
TypeScript
94 lines
2.5 KiB
TypeScript
import { Badge } from './Badge';
|
|
import { Box } from './Box';
|
|
import { StatusDot } from './StatusDot';
|
|
import { Text } from './Text';
|
|
|
|
export { Badge };
|
|
|
|
export interface StatusIndicatorProps {
|
|
status?: 'live' | 'upcoming' | 'completed' | 'cancelled' | 'pending';
|
|
variant?: string; // Alias for status
|
|
label?: string;
|
|
subLabel?: string;
|
|
size?: 'sm' | 'md' | 'lg';
|
|
icon?: any; // Alias for status dot
|
|
}
|
|
|
|
export const StatusIndicator = ({
|
|
status,
|
|
variant,
|
|
label,
|
|
subLabel,
|
|
size = 'md',
|
|
icon
|
|
}: StatusIndicatorProps) => {
|
|
const activeStatus = (status || variant || 'pending') as any;
|
|
|
|
const configMap: any = {
|
|
live: {
|
|
intent: 'success' as const,
|
|
pulse: true,
|
|
text: 'Live',
|
|
},
|
|
upcoming: {
|
|
intent: 'primary' as const,
|
|
pulse: false,
|
|
text: 'Upcoming',
|
|
},
|
|
completed: {
|
|
intent: 'telemetry' as const,
|
|
pulse: false,
|
|
text: 'Completed',
|
|
},
|
|
cancelled: {
|
|
intent: 'critical' as const,
|
|
pulse: false,
|
|
text: 'Cancelled',
|
|
},
|
|
pending: {
|
|
intent: 'warning' as const,
|
|
pulse: false,
|
|
text: 'Pending',
|
|
},
|
|
success: {
|
|
intent: 'success' as const,
|
|
pulse: false,
|
|
text: 'Success',
|
|
},
|
|
danger: {
|
|
intent: 'critical' as const,
|
|
pulse: false,
|
|
text: 'Danger',
|
|
},
|
|
warning: {
|
|
intent: 'warning' as const,
|
|
pulse: false,
|
|
text: 'Warning',
|
|
},
|
|
};
|
|
|
|
const config = configMap[activeStatus] || configMap.pending;
|
|
|
|
return (
|
|
<Box display="flex" alignItems="center" gap={2}>
|
|
<StatusDot intent={config.intent} pulse={config.pulse} size={size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'md'} />
|
|
<Box>
|
|
<Text size={size === 'lg' ? 'md' : 'sm'} weight="bold" variant="high" uppercase>
|
|
{label || config.text}
|
|
</Text>
|
|
{subLabel && <Text size="xs" variant="low">{subLabel}</Text>}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export const StatRow = ({ label, value, subLabel, variant, valueColor, valueFont }: { label: string, value: string, subLabel?: string, variant?: string, valueColor?: string, valueFont?: string }) => (
|
|
<Box display="flex" alignItems="center" justifyContent="between" paddingY={2} borderBottom>
|
|
<Box>
|
|
<Text size="sm" variant="high">{label}</Text>
|
|
{subLabel && <Text size="xs" variant="low">{subLabel}</Text>}
|
|
</Box>
|
|
<Text size="sm" weight="bold" variant={variant as any || 'high'} color={valueColor} font={valueFont as any}>{value}</Text>
|
|
</Box>
|
|
);
|