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
|
content?: string
|
||||||
children?: React.ReactNode
|
children?: React.ReactNode
|
||||||
onDismiss?(): void
|
onDismiss?(): void
|
||||||
|
negative?: boolean
|
||||||
|
positive?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const Message = forwardRef(
|
const Message = forwardRef(
|
||||||
(
|
(
|
||||||
{ onDismiss, header, children, content }: MessageProps,
|
{ onDismiss, header, children, content, negative, positive }: MessageProps,
|
||||||
ref: React.ForwardedRef<HTMLDivElement>
|
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 (
|
return (
|
||||||
<div
|
<div
|
||||||
ref={ref}
|
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">
|
<button onClick={onDismiss} className="absolute top-3 right-2">
|
||||||
<DismissIcon className="w-[10px] h-[10px] text-gray-700 dark:text-gray-200" />
|
<DismissIcon className="w-[10px] h-[10px] text-gray-700 dark:text-gray-200" />
|
||||||
|
|
Loading…
Reference in New Issue