blob: cf84b5911ecaa27023ab57b951e771e6f2d4439f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
/**
* The Alert component is used to display different types of alerts or notifications
* with different styles based on the provided type prop.
*
* @param {Object} props - Props received by the component.
* @param {ReactNode} props.children - The content to be displayed inside the alert.
* @param {string} props.className - Additional CSS class names for the alert.
* @param {string} props.type - The type of the alert ('info', 'success', or 'warning').
* @returns {JSX.Element} - Rendered Alert component.
*/
const Alert = ({ children, className, type }) => {
let typeClass = ''
switch (type) {
case 'info':
typeClass = 'bg-blue-100 text-blue-900 border-blue-400'
break
case 'success':
typeClass = 'bg-green-100 text-green-900 border-green-400'
break
case 'warning':
typeClass = 'bg-yellow-100 text-yellow-900 border-yellow-400'
break
}
return (
<div className={`rounded-md w-full text-medium p-3 border ${typeClass} ${className}`}>
{children}
</div>
)
}
export default Alert
|
