58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import { mdiClose } from '@mdi/js'
|
|
import React, { ReactNode, useState } from 'react'
|
|
import { ColorKey } from '../interfaces'
|
|
import { colorsBgLight, colorsOutline } from '../colors'
|
|
import BaseButton from './BaseButton'
|
|
import BaseIcon from './BaseIcon'
|
|
|
|
type Props = {
|
|
color: ColorKey
|
|
icon?: string
|
|
outline?: boolean
|
|
children: ReactNode
|
|
button?: ReactNode
|
|
}
|
|
|
|
const NotificationBar = ({ outline = false, children, ...props }: Props) => {
|
|
const componentColorClass = outline ? colorsOutline[props.color] : colorsBgLight[props.color]
|
|
|
|
const [isDismissed, setIsDismissed] = useState(false)
|
|
|
|
const dismiss = (e: React.MouseEvent) => {
|
|
e.preventDefault()
|
|
|
|
setIsDismissed(true)
|
|
}
|
|
|
|
if (isDismissed) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`px-3 py-6 md:py-3 mb-6 last:mb-0 border rounded-lg transition-colors duration-150 ${componentColorClass}`}
|
|
>
|
|
<div className="flex flex-col md:flex-row items-center justify-between">
|
|
<div className="flex flex-col md:flex-row items-center mb-6 md:mb-0">
|
|
{props.icon && (
|
|
<BaseIcon
|
|
path={props.icon}
|
|
w="w-10 md:w-5"
|
|
h="h-10 md:h-5"
|
|
size="24"
|
|
className="md:mr-2"
|
|
/>
|
|
)}
|
|
<span className="text-center md:text-left md:py-2">{children}</span>
|
|
</div>
|
|
{props.button}
|
|
{!props.button && (
|
|
<BaseButton icon={mdiClose} color="white" onClick={dismiss} small roundedFull />
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default NotificationBar
|