Notice

import type { FC } from 'react'
import classnames from 'classnames'
import {
  CheckCircleIcon,
  ExclamationCircleIcon,
  ExclamationTriangleIcon,
  InformationCircleIcon
} from '@heroicons/react/24/solid'
 
export interface Props {
  content: string
  type?: 'success' | 'info' | 'warn' | 'danger'
}
interface State {}
 
const Notice: FC<Props> = ({ type, content }) => {
  return (
    <div
      className={classnames(
        'rounded-l rounded-r-md border border-l-4 p-3',
        !!type
          ? 'flex items-center gap-2'
          : 'border-neutral-300 border-l-neutral-500 bg-neutral-50 dark:border-neutral-200/30 dark:border-l-neutral-400/30 dark:bg-neutral-900/30',
        {
          'border-green-300 border-l-green-500 bg-green-50 dark:border-green-200/30 dark:border-l-green-400/30 dark:bg-green-900/30':
            type === 'success',
          'border-blue-300 border-l-blue-500 bg-blue-50 dark:border-blue-200/30 dark:border-l-blue-400/30 dark:bg-blue-900/30':
            type === 'info',
          'border-amber-300 border-l-amber-500 bg-amber-50 dark:border-amber-200/30 dark:border-l-amber-400/30 dark:bg-amber-900/30':
            type === 'warn',
          'border-red-300 border-l-red-500 bg-red-50 dark:border-red-200/30 dark:border-l-red-400/30 dark:bg-red-900/30':
            type === 'danger'
        }
      )}
    >
      {type === 'success' && (
        <CheckCircleIcon className="h-5 w-5 text-green-500" />
      )}
      {type === 'info' && (
        <InformationCircleIcon className="h-5 w-5 text-blue-500" />
      )}
      {type === 'warn' && (
        <ExclamationTriangleIcon className="h-5 w-5 text-amber-500" />
      )}
      {type === 'danger' && (
        <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
      )}
      <div
        className={classnames(
          'text-sm',
          !!type ? 'flex-1' : 'text-neutral-700 dark:text-neutral-200',
          {
            'text-green-700 dark:text-green-200': type === 'success',
            'text-blue-700 dark:text-blue-200': type === 'info',
            'text-amber-700 dark:text-amber-200': type === 'warn',
            'text-red-700 dark:text-red-200': type === 'danger'
          }
        )}
      >
        {content}
      </div>
    </div>
  )
}
 
export default Notice

<Notice content="Default" />
<Notice content="Success" type="success" />
<Notice content="Info" type="info" />
<Notice content="Warn" type="warn" />
<Notice content="Danger" type="danger" />