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

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-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="mr-1.5 h-5 w-5 flex-shrink-0 text-th-error" />
    ) : null}
    {type === 'success' ? (
      <CheckCircleIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-th-success" />
    ) : null}
    {type === 'warning' ? (
      <ExclamationTriangleIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-th-warning" />
    ) : 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