Notice

npm install lucide-react

import { memo } from 'react'
import {
  AlertTriangleIcon,
  BanIcon,
  CheckCircle2Icon,
  InfoIcon
} from 'lucide-react'
import { cn } from 'utils'
 
export interface Props {
  content: string
  type?: 'success' | 'info' | 'warn' | 'danger'
}
 
function Notice({ content, type }: Props) {
  return (
    <div
      className={cn(
        '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' && (
        <CheckCircle2Icon className="h-5 w-5 text-green-500" />
      )}
      {type === 'info' && <InfoIcon className="h-5 w-5 text-blue-500" />}
      {type === 'warn' && (
        <AlertTriangleIcon className="h-5 w-5 text-amber-500" />
      )}
      {type === 'danger' && <BanIcon className="h-5 w-5 text-red-500" />}
      <div
        className={cn(
          '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 memo(Notice)

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