74 lines
2.0 KiB
TypeScript
74 lines
2.0 KiB
TypeScript
import { FunctionComponent, ReactElement } from 'react'
|
|
import {
|
|
CheckCircleIcon,
|
|
ExclamationCircleIcon,
|
|
ExclamationTriangleIcon,
|
|
InformationCircleIcon,
|
|
} from '@heroicons/react/20/solid'
|
|
|
|
interface InlineNotificationProps {
|
|
desc?: string | ReactElement
|
|
title?: string | ReactElement
|
|
type: 'error' | 'info' | 'success' | 'warning'
|
|
hideBorder?: boolean
|
|
hidePadding?: boolean
|
|
}
|
|
|
|
const InlineNotification: FunctionComponent<InlineNotificationProps> = ({
|
|
desc,
|
|
title,
|
|
type,
|
|
hideBorder,
|
|
hidePadding,
|
|
}) => {
|
|
const iconClasses = `mr-1.5 ${
|
|
hidePadding ? 'h-4 w-4' : 'h-5 w-5'
|
|
} flex-shrink-0`
|
|
return (
|
|
<div
|
|
className={`${
|
|
!hideBorder
|
|
? `border text-th-fgd-3 ${
|
|
type === 'error'
|
|
? 'border-th-error'
|
|
: type === 'success'
|
|
? 'border-th-success'
|
|
: type === 'info'
|
|
? 'border-th-bkg-4'
|
|
: 'border-th-warning'
|
|
}`
|
|
: type === 'error'
|
|
? 'text-th-error'
|
|
: type === 'success'
|
|
? 'text-th-success'
|
|
: type === 'info'
|
|
? 'text-th-bkg-4'
|
|
: 'text-th-warning'
|
|
} flex items-center rounded-md ${!hidePadding ? 'p-2' : ''}`}
|
|
>
|
|
{type === 'error' ? (
|
|
<ExclamationCircleIcon className={`${iconClasses} text-th-error`} />
|
|
) : null}
|
|
{type === 'success' ? (
|
|
<CheckCircleIcon className={`${iconClasses} text-th-success`} />
|
|
) : null}
|
|
{type === 'warning' ? (
|
|
<ExclamationTriangleIcon className={`${iconClasses} text-th-warning`} />
|
|
) : null}
|
|
{type === 'info' ? (
|
|
<InformationCircleIcon className={`${iconClasses} text-th-fgd-4`} />
|
|
) : null}
|
|
<div>
|
|
<div className="text-th-fgd-2">{title}</div>
|
|
<div
|
|
className={`${title && desc && 'pt-1'} text-left text-xs font-normal`}
|
|
>
|
|
{desc}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default InlineNotification
|