59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import classNames from 'classnames'
|
|
import { useMemo } from 'react'
|
|
|
|
import { CheckCircled, CrossCircled, ExclamationMarkTriangle } from 'components/Icons'
|
|
import Text from 'components/Text'
|
|
|
|
interface Props {
|
|
type: 'success' | 'error' | 'warning' | 'info'
|
|
text: string
|
|
button: React.ReactNode
|
|
}
|
|
|
|
export default function NotificationBanner(props: Props) {
|
|
const [glasColor, bgColor, icon] = useMemo(() => {
|
|
if (props.type === 'success')
|
|
return [
|
|
'bg-success-bg/20',
|
|
'bg-success',
|
|
<CheckCircled className='block h-4 w-4 text-white' key={props.type} />,
|
|
]
|
|
if (props.type === 'error')
|
|
return [
|
|
'bg-error-bg/20',
|
|
'bg-error',
|
|
<CrossCircled className='block h-4 w-4 text-white' key={props.type} />,
|
|
]
|
|
if (props.type === 'warning')
|
|
return [
|
|
'bg-warning-bg/20',
|
|
'bg-warning',
|
|
<ExclamationMarkTriangle className='block h-4 w-4 text-white' key={props.type} />,
|
|
]
|
|
|
|
return [
|
|
'bg-info-bg/20',
|
|
'bg-info',
|
|
<ExclamationMarkTriangle className='block h-4 w-4 text-white' key={props.type} />,
|
|
]
|
|
}, [props.type])
|
|
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
'relative isolate m-0 flex w-full flex-wrap rounded-sm px-4 py-3',
|
|
'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-sm before:p-[1px] before:border-glas',
|
|
glasColor,
|
|
)}
|
|
>
|
|
<div className='flex w-full items-center gap-2'>
|
|
<div className={classNames('rounded-sm p-1.5', bgColor)}>{icon}</div>
|
|
<Text size='sm' className='flex-1 text-white'>
|
|
{props.text}
|
|
</Text>
|
|
{props.button}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|