set different color for background of errors and success messages
This commit is contained in:
parent
441bba290c
commit
b293d4996e
|
@ -7,17 +7,23 @@ export type MessageProps = {
|
|||
content?: string
|
||||
children?: React.ReactNode
|
||||
onDismiss?(): void
|
||||
negative?: boolean
|
||||
positive?: boolean
|
||||
}
|
||||
|
||||
const Message = forwardRef(
|
||||
(
|
||||
{ onDismiss, header, children, content }: MessageProps,
|
||||
{ onDismiss, header, children, content, negative, positive }: MessageProps,
|
||||
ref: React.ForwardedRef<HTMLDivElement>
|
||||
) => {
|
||||
let backgroundColor = 'bg-white dark:bg-dark-bg2'
|
||||
if (negative) backgroundColor = 'bg-red-100 dark:bg-red-900'
|
||||
if (positive) backgroundColor = 'bg-green-100 dark:bg-green-900'
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className="bg-white dark:bg-dark-bg2 shadow-md border rounded p-2 relative"
|
||||
className={`${backgroundColor} shadow-md border rounded p-2 relative`}
|
||||
>
|
||||
<button onClick={onDismiss} className="absolute top-3 right-2">
|
||||
<DismissIcon className="w-[10px] h-[10px] text-gray-700 dark:text-gray-200" />
|
||||
|
|
Loading…
Reference in New Issue