Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 70x 57x | import { MaterialSymbol } from 'material-symbols'
import { Color } from '../../types/color'
import { Headline } from '../Headline/Headline'
import { Icon } from '../Icon/Icon'
export type AlertProps = {
/** Headline of the alert. */
headline: string
/** Short description of the alert. */
description: React.ReactNode
/** Color of the border, icon and headline. Should be red for a warning for example. */
color?: Color
/** Custom icon. */
icon?: MaterialSymbol
/** Custom class name. */
className?: string
/** Use this to select element for testing. */
datacy?: string
}
/**
* Notification box, to display important informations.
*/
export const Alert: React.FC<AlertProps> = ({
headline,
description,
color = 'red',
icon = 'notifications',
className = '',
datacy = Alert.name,
}) => {
return (
<div datacy={datacy} className={`flex rounded-xl border-2 border-${color}-500 ${className} p-4 md:p-6`}>
<Icon
datacy={`${datacy}-icon`}
icon={icon}
className={`flex items-center text-${color}-500 mr-2 h-8 w-8 min-w-[32px]`}
/>
<div>
<Headline datacy={`${datacy}-headline`} level={5} className={`text-${color}-500`}>
{headline}
</Headline>
<div datacy={`${datacy}-description`} className="text-sm text-gray-600">
{description}
</div>
</div>
</div>
)
}
|