75 lines
1.6 KiB
TypeScript
75 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { AlertCircle, AlertTriangle, Box, CheckCircle, Info } from 'lucide-react';
|
|
|
|
interface InlineNoticeProps {
|
|
variant?: 'info' | 'success' | 'warning' | 'error';
|
|
title?: string;
|
|
message: string;
|
|
mb?: number;
|
|
}
|
|
|
|
export function InlineNotice({
|
|
variant = 'info',
|
|
title,
|
|
message,
|
|
mb,
|
|
}: InlineNoticeProps) {
|
|
const variants = {
|
|
info: {
|
|
bg: 'bg-primary-blue/10',
|
|
border: 'border-primary-blue/30',
|
|
text: 'text-primary-blue',
|
|
icon: Info,
|
|
},
|
|
success: {
|
|
bg: 'bg-performance-green/10',
|
|
border: 'border-performance-green/30',
|
|
text: 'text-performance-green',
|
|
icon: CheckCircle,
|
|
},
|
|
warning: {
|
|
bg: 'bg-warning-amber/10',
|
|
border: 'border-warning-amber/30',
|
|
text: 'text-warning-amber',
|
|
icon: AlertTriangle,
|
|
},
|
|
error: {
|
|
bg: 'bg-racing-red/10',
|
|
border: 'border-racing-red/30',
|
|
text: 'text-racing-red',
|
|
icon: AlertCircle,
|
|
},
|
|
};
|
|
|
|
const config = variants[variant];
|
|
const Icon = config.icon;
|
|
|
|
return (
|
|
<Box
|
|
p={4}
|
|
rounded="lg"
|
|
bg={config.bg}
|
|
border
|
|
borderColor={config.border}
|
|
mb={mb}
|
|
>
|
|
<Stack direction="row" gap={3} align="start">
|
|
<Icon className={`w-5 h-5 ${config.text} mt-0.5`} />
|
|
<Box>
|
|
{title && (
|
|
<Text weight="semibold" color="text-white" block mb={1}>
|
|
{title}
|
|
</Text>
|
|
)}
|
|
<Text size="sm" color="text-gray-300" block>
|
|
{message}
|
|
</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|