68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
import { cva, type VariantProps } from 'class-variance-authority';
|
|
import { cn } from '@utils/cn';
|
|
import { AlertCircle, CheckCircle, Info, XCircle, X } from 'lucide-react';
|
|
|
|
const alertVariants = cva(
|
|
'relative rounded-lg border p-4',
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default: 'bg-gray-50 border-gray-200 text-gray-800',
|
|
success: 'bg-success-50 border-success-200 text-success-800',
|
|
warning: 'bg-warning-50 border-warning-200 text-warning-800',
|
|
danger: 'bg-danger-50 border-danger-200 text-danger-800',
|
|
info: 'bg-blue-50 border-blue-200 text-blue-800',
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'default',
|
|
},
|
|
}
|
|
);
|
|
|
|
const iconMap = {
|
|
default: Info,
|
|
success: CheckCircle,
|
|
warning: AlertCircle,
|
|
danger: XCircle,
|
|
info: Info,
|
|
};
|
|
|
|
export interface AlertProps extends VariantProps<typeof alertVariants> {
|
|
title?: string;
|
|
children: ReactNode;
|
|
onClose?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function Alert({ title, children, variant = 'default', onClose, className }: AlertProps) {
|
|
const Icon = iconMap[variant || 'default'];
|
|
|
|
return (
|
|
<div className={cn(alertVariants({ variant }), className)} role="alert">
|
|
<div className="flex">
|
|
<div className="flex-shrink-0">
|
|
<Icon className="h-5 w-5" />
|
|
</div>
|
|
<div className="ml-3 flex-1">
|
|
{title && <h3 className="text-sm font-medium">{title}</h3>}
|
|
<div className={cn('text-sm', title && 'mt-1')}>{children}</div>
|
|
</div>
|
|
{onClose && (
|
|
<div className="ml-auto pl-3">
|
|
<button
|
|
type="button"
|
|
className="inline-flex rounded-md p-1.5 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2"
|
|
onClick={onClose}
|
|
>
|
|
<span className="sr-only">Cerrar</span>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|