Alert

"use client";

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

export default function AlertDemo() {
  return (
    <div className={styles.container}>
      <Alert>
        <AlertIcon>
          <Mail size={16} />
        </AlertIcon>
        <AlertTitle>New Msg</AlertTitle>
        <AlertDescription> You&apos;ve got a new message.</AlertDescription>
      </Alert>
    </div>
  );
}

"use client";

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

export default function AlertDemo() {
  return (
    <div className={styles.container}>
      <Alert>
        <AlertIcon>
          <Mail size={16} />
        </AlertIcon>
        <AlertTitle>New Msg</AlertTitle>
        <AlertDescription> You&apos;ve got a new message.</AlertDescription>
      </Alert>
    </div>
  );
}

"use client";

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

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

"use client";

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

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

"use client";

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

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

"use client";

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

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