Alert

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'

export default function AlertBasic() {
  return (
    <div className="flex max-w-xl flex-col gap-4">
      <Alert variant="info">
        <AlertTitle>Scheduled maintenance</AlertTitle>
        <AlertDescription>Billing is read-only on Sunday from 02:00 to 04:00 UTC.</AlertDescription>
      </Alert>
      <Alert variant="success">
        <AlertTitle>Invoice sent</AlertTitle>
        <AlertDescription>Northwind Traders will get it within a few minutes.</AlertDescription>
      </Alert>
      <Alert variant="warning">
        <AlertTitle>Card expires soon</AlertTitle>
        <AlertDescription>
          Update your payment method before Nov 30 to avoid interruption.
        </AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <AlertTitle>Payment failed</AlertTitle>
        <AlertDescription>Your bank declined the charge. Try another card.</AlertDescription>
      </Alert>
    </div>
  )
}