Alert

// owner: Sona
"use client";

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { CheckCircle2, Info, ShieldAlert } from "lucide-react";

export default function AlertExample() {
  return (
    <div className="flex flex-col gap-4">
      <Alert className="gap-2">
        <CheckCircle2 className="text-emerald-500 size-4" />
        <div>
          <AlertTitle>Deployment successful</AlertTitle>
          <AlertDescription>
            The production cluster has been updated and is live.
          </AlertDescription>
        </div>
      </Alert>
      <Alert variant="destructive" className="gap-2">
        <ShieldAlert className="size-4" />
        <div>
          <AlertTitle>Database locked</AlertTitle>
          <AlertDescription>
            Rotate your credentials or contact an administrator.
          </AlertDescription>
        </div>
      </Alert>
      <Alert className="gap-2" variant="default">
        <Info className="size-4" />
        <div>
          <AlertTitle>Heads up</AlertTitle>
          <AlertDescription>
            Maintenance is scheduled for this weekend.
          </AlertDescription>
        </div>
      </Alert>
    </div>
  );
}