66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { Surface } from './Surface';
|
|
import { Stack } from './Stack';
|
|
import { Box } from './Box';
|
|
import { Icon } from './Icon';
|
|
import { Text } from './Text';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface InfoBoxProps {
|
|
icon: LucideIcon;
|
|
title: string;
|
|
description: string;
|
|
variant?: 'primary' | 'success' | 'warning' | 'default';
|
|
}
|
|
|
|
export function InfoBox({ icon, title, description, variant = 'default' }: InfoBoxProps) {
|
|
const variantColors = {
|
|
primary: {
|
|
bg: 'rgba(59, 130, 246, 0.1)',
|
|
border: '#3b82f6',
|
|
text: '#3b82f6',
|
|
icon: '#3b82f6'
|
|
},
|
|
success: {
|
|
bg: 'rgba(16, 185, 129, 0.1)',
|
|
border: '#10b981',
|
|
text: '#10b981',
|
|
icon: '#10b981'
|
|
},
|
|
warning: {
|
|
bg: 'rgba(245, 158, 11, 0.1)',
|
|
border: '#f59e0b',
|
|
text: '#f59e0b',
|
|
icon: '#f59e0b'
|
|
},
|
|
default: {
|
|
bg: 'rgba(38, 38, 38, 0.3)',
|
|
border: '#262626',
|
|
text: 'white',
|
|
icon: '#9ca3af'
|
|
}
|
|
};
|
|
|
|
const colors = variantColors[variant];
|
|
|
|
return (
|
|
<Surface
|
|
variant="muted"
|
|
rounded="xl"
|
|
border
|
|
padding={4}
|
|
style={{ backgroundColor: colors.bg, borderColor: colors.border }}
|
|
>
|
|
<Stack direction="row" align="start" gap={3}>
|
|
<Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}>
|
|
<Icon icon={icon} size={5} color={colors.icon} />
|
|
</Surface>
|
|
<Box>
|
|
<Text weight="medium" style={{ color: colors.text }} block>{title}</Text>
|
|
<Text size="sm" color="text-gray-400" block mt={1}>{description}</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|