61 lines
1.3 KiB
TypeScript
61 lines
1.3 KiB
TypeScript
import { Box } from '@/ui/Box';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Text } from '@/ui/Text';
|
|
import { AlertCircle, AlertTriangle, CheckCircle, Info } from 'lucide-react';
|
|
|
|
interface InlineNoticeProps {
|
|
variant?: 'info' | 'success' | 'warning' | 'error';
|
|
title?: string;
|
|
message: string;
|
|
}
|
|
|
|
export function InlineNotice({
|
|
variant = 'info',
|
|
title,
|
|
message,
|
|
}: InlineNoticeProps) {
|
|
const variants = {
|
|
info: {
|
|
intent: 'primary' as const,
|
|
icon: Info,
|
|
},
|
|
success: {
|
|
intent: 'success' as const,
|
|
icon: CheckCircle,
|
|
},
|
|
warning: {
|
|
intent: 'warning' as const,
|
|
icon: AlertTriangle,
|
|
},
|
|
error: {
|
|
intent: 'critical' as const,
|
|
icon: AlertCircle,
|
|
},
|
|
};
|
|
|
|
const config = variants[variant];
|
|
|
|
return (
|
|
<Box
|
|
padding={4}
|
|
rounded="lg"
|
|
bg="var(--ui-color-bg-surface-muted)"
|
|
style={{ border: '1px solid var(--ui-color-border-default)' }}
|
|
>
|
|
<Box display="flex" gap={3} alignItems="start">
|
|
<Icon icon={config.icon} size={5} intent={config.intent} />
|
|
<Box>
|
|
{title && (
|
|
<Text weight="bold" variant="high" block marginBottom={1}>
|
|
{title}
|
|
</Text>
|
|
)}
|
|
<Text size="sm" variant="med" block>
|
|
{message}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|