mango-v4-ui/components/shared/InlineNotification.tsx

69 lines
1.7 KiB
TypeScript

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