39 lines
886 B
TypeScript
39 lines
886 B
TypeScript
import React, { FC } from 'react'
|
|
import { MdDone, MdError, MdInfo, MdWarning } from 'react-icons/md'
|
|
|
|
type AlertSeverity = 'error' | 'warning' | 'info' | 'success'
|
|
|
|
const ICONS = {
|
|
error: <MdError />,
|
|
warning: <MdWarning />,
|
|
info: <MdInfo />,
|
|
success: <MdDone />
|
|
}
|
|
|
|
const COLOR_CLASSES = {
|
|
error: 'bg-red-300 border-red-600 text-red-800',
|
|
warning: 'bg-orange-300 border-orange-600 text-orange-800',
|
|
info: 'bg-blue-300 border-blue-600 text-blue-800',
|
|
success: 'bg-green-300 border-green-600 text-green-800',
|
|
}
|
|
|
|
export type Props = {
|
|
severity?: AlertSeverity
|
|
text?: string
|
|
}
|
|
|
|
export const AlertV2: FC<Props> = ({
|
|
severity = 'info',
|
|
text = '',
|
|
}) => (
|
|
<div className={`flex rounded shadow p-4 mx-auto my-2 ${COLOR_CLASSES[severity]}`}>
|
|
<div className="text-xl my-auto pr-2">
|
|
{ICONS[severity]}
|
|
</div>
|
|
<span>
|
|
{text}
|
|
</span>
|
|
</div>
|
|
)
|
|
|