Alert

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

export default function AlertDemo() {
  return (
    <Alert>
      <InfoIcon />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components to your app using the CLI.
      </AlertDescription>
    </Alert>
  );
}

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

export default function AlertOutline() {
  return (
    <Alert variant="outline">
      <InfoIcon />
      <AlertTitle>Note</AlertTitle>
      <AlertDescription>
        This is an outline alert for general information.
      </AlertDescription>
    </Alert>
  );
}

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

export default function AlertDestructive() {
  return (
    <Alert variant="destructive">
      <CircleAlertIcon />
      <AlertTitle>Error</AlertTitle>
      <AlertDescription>
        Your session has expired. Please log in again.
      </AlertDescription>
    </Alert>
  );
}

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

export default function AlertSuccess() {
  return (
    <Alert variant="success">
      <CircleCheckIcon />
      <AlertTitle>Success</AlertTitle>
      <AlertDescription>
        Your changes have been saved successfully.
      </AlertDescription>
    </Alert>
  );
}

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

export default function AlertInfo() {
  return (
    <Alert variant="info">
      <InfoIcon />
      <AlertTitle>Did you know?</AlertTitle>
      <AlertDescription>
        You can use keyboard shortcuts to navigate faster.
      </AlertDescription>
    </Alert>
  );
}

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

export default function AlertWarning() {
  return (
    <Alert variant="warning">
      <TriangleAlertIcon />
      <AlertTitle>Warning</AlertTitle>
      <AlertDescription>
        Your account is nearing its storage limit.
      </AlertDescription>
    </Alert>
  );
}