Alert

import { CheckCircle2Icon, CircleAlertIcon, InfoIcon, TriangleAlertIcon } from 'lucide-react'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'

export function AlertVariants() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Alert>
        <InfoIcon />
        <AlertTitle>Your application has been received</AlertTitle>
        <AlertDescription>
          We will review it within 10 working days. You can follow the case under <a href="#my-cases">My cases</a>.
        </AlertDescription>
      </Alert>
      <Alert variant="info">
        <InfoIcon />
        <AlertTitle>Decisions are sent digitally</AlertTitle>
        <AlertDescription>
          From 1 April we send decisions to your digital mailbox. Paper letters go only to people without one.
        </AlertDescription>
      </Alert>
      <Alert variant="success">
        <CheckCircle2Icon />
        <AlertTitle>Your application has been sent</AlertTitle>
        <AlertDescription>Your case number is 2026-04812. We have sent a confirmation to your email.</AlertDescription>
      </Alert>
      <Alert variant="warning">
        <TriangleAlertIcon />
        <AlertTitle>Documents are missing</AlertTitle>
        <AlertDescription>
          Upload a site plan by 20 March 2026, or we will decide the case on the documents we have.
        </AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <CircleAlertIcon />
        <AlertTitle>The application could not be sent</AlertTitle>
        <AlertDescription>
          The connection to the case management system timed out. Your answers are saved, please try again in a few minutes.
        </AlertDescription>
      </Alert>
    </div>
  )
}

import { CalendarClockIcon, CheckCircle2Icon, TriangleAlertIcon } from 'lucide-react'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'

export function AlertStatusMessages() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Alert variant="success">
        <CheckCircle2Icon />
        <AlertTitle>Building permit granted</AlertTitle>
        <AlertDescription>
          Case 2026-04812 was decided on 3 March 2026. The decision gains legal force after four weeks unless it is appealed.
        </AlertDescription>
      </Alert>
      <Alert variant="info">
        <CalendarClockIcon />
        <AlertTitle>Waste collection moved</AlertTitle>
        <AlertDescription>Because of Ascension Day, collection on Thursday 14 May moves to Friday 15 May.</AlertDescription>
      </Alert>
      <Alert variant="warning">
        <TriangleAlertIcon />
        <AlertTitle>Water outage on Kungsgatan</AlertTitle>
        <AlertDescription>
          Kungsgatan 1–27 is without water until about 15:00 while a main is repaired. A water tank is placed outside number
          12.
        </AlertDescription>
      </Alert>
    </div>
  )
}

import { CheckCircle2Icon, CircleAlertIcon, InfoIcon, TriangleAlertIcon } from 'lucide-react'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'

export function AlertRoles() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Alert role="note">
        <InfoIcon />
        <AlertTitle>Processing time is about six weeks</AlertTitle>
        <AlertDescription>
          <code>role="note"</code>: guidance that is part of the page. It is read in its place and never announced.
        </AlertDescription>
      </Alert>
      <Alert variant="success">
        <CheckCircle2Icon />
        <AlertTitle>Draft saved</AlertTitle>
        <AlertDescription>
          <code>role="status"</code>, the default for every variant except <code>destructive</code>: announced when the
          screen reader is idle.
        </AlertDescription>
      </Alert>
      <Alert variant="warning" role="alert">
        <TriangleAlertIcon />
        <AlertTitle>You will be signed out in 2 minutes</AlertTitle>
        <AlertDescription>
          <code>role="alert"</code> on a warning: urgent, so the screen reader interrupts to read it.
        </AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <CircleAlertIcon />
        <AlertTitle>The application could not be sent</AlertTitle>
        <AlertDescription>
          <code>role="alert"</code>, the default for <code>destructive</code>.
        </AlertDescription>
      </Alert>
    </div>
  )
}

import { CalendarClockIcon, InfoIcon, XIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Alert, AlertAction, AlertDescription, AlertTitle } from '@/components/ui/alert'

export function AlertWithAction() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Alert>
        <CalendarClockIcon />
        <AlertTitle>Your parking permit expires in 12 days</AlertTitle>
        <AlertDescription>Resident permit for zone C, vehicle ABC 123. Valid until 10 April 2026.</AlertDescription>
        <AlertAction>
          <Button size="xs" variant="outline">
            Renew
          </Button>
        </AlertAction>
      </Alert>
      <Alert>
        <InfoIcon />
        <AlertTitle>New opening hours at the city library</AlertTitle>
        <AlertDescription>From 1 June the library is open until 20:00 on weekdays.</AlertDescription>
        <AlertAction>
          <Button size="icon-xs" variant="ghost" aria-label="Dismiss">
            <XIcon />
          </Button>
        </AlertAction>
      </Alert>
    </div>
  )
}

import { CircleAlertIcon } from 'lucide-react'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'

export function AlertWithList() {
  return (
    <Alert variant="destructive" className="w-full max-w-md">
      <CircleAlertIcon />
      <AlertTitle>Fix 3 problems before you send the application</AlertTitle>
      <AlertDescription>
        <ul className="mt-1 list-inside list-disc space-y-0.5">
          <li>
            <a href="#property">Property designation</a> is missing
          </li>
          <li>
            <a href="#site-plan">Site plan</a> must be a PDF file
          </li>
          <li>
            <a href="#consent">Neighbour consent</a> needs a signature
          </li>
        </ul>
      </AlertDescription>
    </Alert>
  )
}

import { InfoIcon } from 'lucide-react'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'

export function AlertCompact() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Alert>
        <InfoIcon />
        <AlertTitle>The registry is closed for lunch 12:00–13:00.</AlertTitle>
      </Alert>
      <Alert variant="destructive">
        <AlertDescription>
          Enter a personal identity number in the format YYYYMMDD-XXXX, for example 19850412-1234.
        </AlertDescription>
      </Alert>
    </div>
  )
}