import { AlertCircle } from "lucide-react"

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

export function Component() {
  return (
    <div className="grid w-full max-w-xl items-start gap-4">
      <Alert>
        <AlertCircle />
        <AlertTitle>Default Alert</AlertTitle>
        <AlertDescription>
          This is a default alert for general information.
        </AlertDescription>
      </Alert>
    </div>
  )
}

import { AlertCircle } from "lucide-react"

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

export function AlertDemo() {
  return (
    <div className="grid w-full max-w-xl items-start gap-4">
      <Alert variant="destructive">
        <AlertCircle />
        <AlertTitle>Error Alert</AlertTitle>
        <AlertDescription>
          Something went wrong. Please try again.
        </AlertDescription>
      </Alert>
    </div>
  )
}

import { Info } from "lucide-react"

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

export function AlertDemo() {
  return (
    <div className="grid w-full max-w-xl items-start gap-4">
      <Alert variant="info">
        <Info />
        <AlertTitle>Info Alert</AlertTitle>
        <AlertDescription>
          Here&apos;s some helpful information you should know.
        </AlertDescription>
      </Alert>
    </div>
  )
}

import { CheckCircle } from "lucide-react"

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

export function AlertDemo() {
  return (
    <div className="grid w-full max-w-xl items-start gap-4">
      <Alert variant="success">
        <CheckCircle />
        <AlertTitle>Success Alert</AlertTitle>
        <AlertDescription>
          Your action was completed successfully!
        </AlertDescription>
      </Alert>
    </div>
  )
}

import { AlertTriangle } from "lucide-react"

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

export function AlertDemo() {
  return (
    <div className="grid w-full max-w-xl items-start gap-4">
      <Alert variant="warning">
        <AlertTriangle />
        <AlertTitle>Warning Alert</AlertTitle>
        <AlertDescription>
          Please review this information carefully before proceeding.
        </AlertDescription>
      </Alert>
    </div>
  )
}

import { AlertCircle } from "lucide-react"

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

export function AlertDemo() {
  return (
    <div className="grid w-full max-w-xl items-start gap-4">
      <section className="space-y-4">
        <Alert size="sm">
          <AlertCircle />
          <AlertTitle>Small Alert</AlertTitle>
          <AlertDescription>
            This is a small alert with compact spacing.
          </AlertDescription>
        </Alert>

        <Alert size="md">
          <AlertCircle />
          <AlertTitle>Medium Alert (Default)</AlertTitle>
          <AlertDescription>
            This is a medium-sized alert with standard spacing.
          </AlertDescription>
        </Alert>

        <Alert size="lg">
          <AlertCircle />
          <AlertTitle>Large Alert</AlertTitle>
          <AlertDescription>
            This is a large alert with generous spacing for important messages.
          </AlertDescription>
        </Alert>
      </section>
    </div>
  )
}

"use client"

import { useState } from "react"
import { Download } from "lucide-react"

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"
import { Button } from "@/components/ui/button"

export function Component() {
  const [dismissed, setDismissed] = useState(false)
  if (dismissed) {
    return (
      <div className="flex w-full justify-center p-6">
        <div className="w-full max-w-lg text-center">
          <p className="text-muted-foreground mb-4">Alert dismissed</p>
          <Button variant="outline" onClick={() => setDismissed(false)}>
            Show Alert
          </Button>
        </div>
      </div>
    )
  }
  return (
    <div className="flex w-full justify-center p-6">
      <div className="w-full max-w-lg">
        <Alert>
          <Download />
          <AlertTitle>New version available</AlertTitle>
          <AlertDescription>
            <p className="mb-3">
              Version 2.1.0 is now available with security improvements.
            </p>
            <div className="flex gap-2">
              <Button size="sm">Download Now</Button>
              <Button
                size="sm"
                variant="outline"
                onClick={() => setDismissed(true)}
              >
                Dismiss
              </Button>
            </div>
          </AlertDescription>
        </Alert>
      </div>
    </div>
  )
}

"use client"

import { useState } from "react"
import { CircleAlertIcon, XIcon } from "lucide-react"

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

export function Component() {
  const [isActive, setIsActive] = useState(true)
  if (!isActive) return null
  return (
    <div className="flex w-full justify-center p-6">
      <div className="w-full max-w-lg">
        <Alert className="flex justify-between">
          <CircleAlertIcon />
          <div className="flex flex-1 flex-col gap-1">
            <AlertTitle>Verify your email to activate your account</AlertTitle>
            <AlertDescription>
              We&apos;ve sent a confirmation link to your inbox. Check your
              email to complete the sign-up.
            </AlertDescription>
          </div>
          <button className="cursor-pointer" onClick={() => setIsActive(false)}>
            <XIcon className="size-5" />
            <span className="sr-only">Close</span>
          </button>
        </Alert>
      </div>
    </div>
  )
}