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