72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
import { LucideIcon } from 'lucide-react';
|
|
import { Box } from './Box';
|
|
import { Icon } from './Icon';
|
|
import { Surface } from './Surface';
|
|
import { Text } from './Text';
|
|
|
|
export interface InfoBoxProps {
|
|
title: string;
|
|
description: string;
|
|
icon: LucideIcon;
|
|
intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
|
|
variant?: string; // Alias for intent
|
|
}
|
|
|
|
export const InfoBox = ({
|
|
title,
|
|
description,
|
|
icon,
|
|
intent = 'primary',
|
|
variant
|
|
}: InfoBoxProps) => {
|
|
const activeIntent = (variant || intent) as any;
|
|
|
|
const configMap: any = {
|
|
primary: {
|
|
bg: 'rgba(25, 140, 255, 0.05)',
|
|
border: 'rgba(25, 140, 255, 0.2)',
|
|
},
|
|
success: {
|
|
bg: 'rgba(111, 227, 122, 0.05)',
|
|
border: 'rgba(111, 227, 122, 0.2)',
|
|
},
|
|
warning: {
|
|
bg: 'rgba(255, 190, 77, 0.05)',
|
|
border: 'rgba(255, 190, 77, 0.2)',
|
|
},
|
|
critical: {
|
|
bg: 'rgba(227, 92, 92, 0.05)',
|
|
border: 'rgba(227, 92, 92, 0.2)',
|
|
},
|
|
telemetry: {
|
|
bg: 'rgba(78, 212, 224, 0.05)',
|
|
border: 'rgba(78, 212, 224, 0.2)',
|
|
},
|
|
};
|
|
|
|
const config = configMap[activeIntent] || configMap.primary;
|
|
|
|
return (
|
|
<Surface
|
|
variant="muted"
|
|
rounded="xl"
|
|
padding={4}
|
|
style={{ backgroundColor: config.bg, border: `1px solid ${config.border}` }}
|
|
>
|
|
<Box display="flex" alignItems="start" gap={4}>
|
|
<Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(255,255,255,0.05)' }}>
|
|
<Icon icon={icon} size={5} intent={activeIntent} />
|
|
</Surface>
|
|
<Box>
|
|
<Text weight="medium" variant="high" block>
|
|
{title}
|
|
</Text>
|
|
<Text size="sm" variant="low" block marginTop={1}>
|
|
{description}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
</Surface>
|
|
);
|
|
};
|