Alert

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { DangerTriangle, InfoCircle } from "@mynaui/icons-react";

export default function Alert1() {
  return (
    <>
      <Alert>
        <InfoCircle className="size-4" />
        <AlertTitle>You have a new invoice due.</AlertTitle>
        <AlertDescription>
          This is the alert description that shows some information.
        </AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <DangerTriangle className="size-4" />
        <AlertTitle>Something went wrong with your submission.</AlertTitle>
        <AlertDescription>
          Please check your connection and try again. If the problem persists,
          contact support.
        </AlertDescription>
      </Alert>
    </>
  );
}

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

export default function Alert2() {
  return (
    <>
      <Alert>
        <AlertTitle>You have a new invoice due.</AlertTitle>
        <AlertDescription>
          This is the alert description that shows some information.
        </AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <AlertTitle>Something went wrong with your submission.</AlertTitle>
        <AlertDescription>
          Please check your connection and try again. If the problem persists,
          contact support.
        </AlertDescription>
      </Alert>
    </>
  );
}

import { Alert, AlertTitle } from "@/components/ui/alert";
import { DangerTriangle, InfoCircle } from "@mynaui/icons-react";

export default function Alert3() {
  return (
    <>
      <Alert>
        <InfoCircle className="size-4" />
        <AlertTitle>You have a new invoice due.</AlertTitle>
      </Alert>
      <Alert variant="destructive">
        <DangerTriangle className="size-4" />
        <AlertTitle>Something went wrong with your submission.</AlertTitle>
      </Alert>
    </>
  );
}

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

export default function Alert4() {
  return (
    <>
      <Alert>
        <AlertTitle>You have a new invoice due.</AlertTitle>
      </Alert>
      <Alert variant="destructive">
        <AlertTitle>Something went wrong with your submission.</AlertTitle>
      </Alert>
    </>
  );
}

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { DangerTriangle, InfoCircle } from "@mynaui/icons-react";

export default function Alert5() {
  return (
    <>
      <Alert>
        <InfoCircle className="size-4" />
        <AlertTitle>You have a new invoice due.</AlertTitle>
        <AlertDescription>
          Do not miss out on the opportunity to pay your invoice. It&apos;s due
          in 3 days.
          <a
            href="#"
            className="inline-flex text-sm font-medium underline text-foreground"
          >
            Pay Now
          </a>
        </AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <DangerTriangle className="size-4" />
        <AlertTitle>Something went wrong with your submission.</AlertTitle>
        <AlertDescription>
          Please check your connection and try again. If the problem persists,
          contact support.
          <a
            href="#"
            className="inline-flex text-sm font-medium text-destructive underline"
          >
            Retry
          </a>
        </AlertDescription>
      </Alert>
    </>
  );
}