project-nomad/admin/inertia/components/Alert.tsx

import { ExclamationTriangleIcon, XCircleIcon } from '@heroicons/react/24/solid'
import { IconCircleCheck } from '@tabler/icons-react'
import classNames from '~/lib/classNames'

interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string
  message?: string
  type: 'warning' | 'error' | 'success'
}

export default function Alert({ title, message, type, ...props }: AlertProps) {
  const getIcon = () => {
    const Icon =
      type === 'warning'
        ? ExclamationTriangleIcon
        : type === 'error'
          ? XCircleIcon
          : IconCircleCheck
    const color =
      type === 'warning' ? 'text-yellow-400' : type === 'error' ? 'text-red-400' : 'text-green-400'

    return <Icon aria-hidden="true" className={`size-5 ${color}`} />
  }

  const getBackground = () => {
    return type === 'warning' ? 'bg-yellow-100' : type === 'error' ? 'bg-red-50' : 'bg-green-50'
  }

  const getTextColor = () => {
    return type === 'warning'
      ? 'text-yellow-800'
      : type === 'error'
        ? 'text-red-800'
        : 'text-green-800'
  }

  return (
    <div
      {...props}
      className={classNames(
        getBackground(),
        props.className,
        'border border-gray-200 rounded-md p-3 shadow-xs'
      )}
    >
      <div className="flex">
        <div className="shrink-0">{getIcon()}</div>
        <div className="ml-3">
          <h3 className={`text-sm font-medium ${getTextColor()}`}>{title}</h3>
          {message && (
            <div className={`mt-2 text-sm ${getTextColor()}`}>
              <p>{message}</p>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}