Alert

"use client";

import { Mail } from "lucide-react";
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert/alert";
import { Button } from "@/components/ui/button/button";
import styles from "./alert-demo.module.css";

export default function AlertDemo() {
  return (
    <div className={styles.container}>
      <Alert>
        <Mail size={14} stroke="var(--muted-foreground)" />
        <AlertTitle>New Message</AlertTitle>
        <AlertDescription> You&apos;ve got a new message.</AlertDescription>
        <div className={styles.buttonContainer}>
          <Button size="sm" variant="secondary">
            View Inbox
          </Button>
        </div>
      </Alert>
    </div>
  );
}

"use client";

import { Ban } from "lucide-react";
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert/alert";
import styles from "./alert-destructive.module.css";

export default function AlertDestructive() {
  return (
    <div className={styles.container}>
      <Alert variant="destructive">
        <Ban size={16} />
        <AlertTitle>Error</AlertTitle>
        <AlertDescription>
          Your session has expired. Please log in again.
        </AlertDescription>
      </Alert>
    </div>
  );
}

"use client";

import { AlertTriangle } from "lucide-react";
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert/alert";
import styles from "./alert-warning.module.css";

export default function AlertWarning() {
  return (
    <div className={styles.container}>
      <Alert variant="warning">
        <AlertTriangle size={16} />
        <AlertTitle>Warning</AlertTitle>
        <AlertDescription>Something went wrong.</AlertDescription>
      </Alert>
    </div>
  );
}

"use client";

import { CheckCircle } from "lucide-react";
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert/alert";
import styles from "./alert-success.module.css";

export default function AlertSuccess() {
  return (
    <div className={styles.container}>
      <Alert variant="success">
        <CheckCircle size={16} />
        <AlertTitle>Success</AlertTitle>
        <AlertDescription>
          Your account has been created successfully.
        </AlertDescription>
      </Alert>
    </div>
  );
}

"use client";

import { Info } from "lucide-react";
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert/alert";
import styles from "./alert-info.module.css";

export default function AlertInfo() {
  return (
    <div className={styles.container}>
      <Alert variant="info">
        <Info size={16} />
        <AlertTitle>Info</AlertTitle>
        <AlertDescription>
          New features are available! Check out the latest updates.
        </AlertDescription>
      </Alert>
    </div>
  );
}