59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
|
|
interface AlertProps {
|
|
type: 'info' | 'success' | 'warning' | 'error';
|
|
title: React.ReactNode;
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export function Alert({ type, title, className = '', children }: AlertProps) {
|
|
const getTypeStyles = () => {
|
|
switch (type) {
|
|
case 'info':
|
|
return {
|
|
container: 'bg-blue-50 border-blue-200 text-blue-800',
|
|
icon: 'ri-information-line text-blue-600'
|
|
};
|
|
case 'success':
|
|
return {
|
|
container: 'bg-green-50 border-green-200 text-green-800',
|
|
icon: 'ri-checkbox-circle-line text-green-600'
|
|
};
|
|
case 'warning':
|
|
return {
|
|
container: 'bg-yellow-50 border-yellow-200 text-yellow-800',
|
|
icon: 'ri-alert-line text-yellow-600'
|
|
};
|
|
case 'error':
|
|
return {
|
|
container: 'bg-red-50 border-red-200 text-red-800',
|
|
icon: 'ri-error-warning-line text-red-600'
|
|
};
|
|
default:
|
|
return {
|
|
container: 'bg-gray-50 border-gray-200 text-gray-800',
|
|
icon: 'ri-information-line text-gray-600'
|
|
};
|
|
}
|
|
};
|
|
|
|
const styles = getTypeStyles();
|
|
|
|
return (
|
|
<div
|
|
className={`border rounded-md p-3 ${styles.container} ${className}`}
|
|
role="alert"
|
|
>
|
|
<div className="flex">
|
|
<div className="flex-shrink-0">
|
|
<i className={`${styles.icon} mr-2 text-lg`}></i>
|
|
</div>
|
|
<div>
|
|
<div className="font-medium">{title}</div>
|
|
{children && <div className="mt-1 text-sm">{children}</div>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|