81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Info, CheckCircle, AlertTriangle, XCircle, X } from 'lucide-react';
|
|
|
|
type AlertVariant = 'info' | 'success' | 'warning' | 'error';
|
|
|
|
interface AlertProps {
|
|
variant: AlertVariant;
|
|
title?: string;
|
|
children: React.ReactNode;
|
|
dismissible?: boolean;
|
|
}
|
|
|
|
const variantStyles: Record<AlertVariant, {
|
|
container: string;
|
|
border: string;
|
|
icon: React.ElementType;
|
|
iconColor: string
|
|
}> = {
|
|
info: {
|
|
container: 'bg-blue-50 text-blue-800',
|
|
border: 'border-blue-200',
|
|
icon: Info,
|
|
iconColor: 'text-blue-500',
|
|
},
|
|
success: {
|
|
container: 'bg-green-50 text-green-800',
|
|
border: 'border-green-200',
|
|
icon: CheckCircle,
|
|
iconColor: 'text-green-500',
|
|
},
|
|
warning: {
|
|
container: 'bg-yellow-50 text-yellow-800',
|
|
border: 'border-yellow-200',
|
|
icon: AlertTriangle,
|
|
iconColor: 'text-yellow-500',
|
|
},
|
|
error: {
|
|
container: 'bg-red-50 text-red-800',
|
|
border: 'border-red-200',
|
|
icon: XCircle,
|
|
iconColor: 'text-red-500',
|
|
},
|
|
};
|
|
|
|
export default function Alert({ variant, title, children, dismissible = false }: AlertProps) {
|
|
const [isVisible, setIsVisible] = useState(true);
|
|
|
|
if (!isVisible) return null;
|
|
|
|
const style = variantStyles[variant];
|
|
const Icon = style.icon;
|
|
|
|
return (
|
|
<div className={`relative p-4 rounded-lg border ${style.container} ${style.border} flex gap-3 items-start`}>
|
|
<div className="flex-shrink-0 mt-0.5">
|
|
<Icon className={`w-5 h-5 ${style.iconColor}`} />
|
|
</div>
|
|
|
|
<div className="flex-1">
|
|
{title && (
|
|
<strong className="block font-semibold mb-1">
|
|
{title}
|
|
</strong>
|
|
)}
|
|
<div className="text-sm opacity-90">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
|
|
{dismissible && (
|
|
<button
|
|
onClick={() => setIsVisible(false)}
|
|
className="flex-shrink-0 p-1 rounded-md hover:bg-black/5 transition-colors"
|
|
aria-label="Dismiss alert"
|
|
>
|
|
<X className="w-4 h-4 opacity-60" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
} |