Alert5

1import { Alert, AlertDescription, AlertTitle } from "@/ui/alert";
2import { DangerTriangle, InfoCircle } from "@mynaui/icons-react";
3 
4export default function Alert5() {
5  return (
6    <>
7      <Alert>
8        <InfoCircle className="size-4" />
9        <AlertTitle>You have a new invoice due.</AlertTitle>
10        <AlertDescription>
11          Do not miss out on the opportunity to pay your invoice. It&apos;s due
12          in 3 days.
13          <a
14            href="#"
15            className="inline-flex text-sm font-medium underline text-foreground"
16          >
17            Pay Now
18          </a>
19        </AlertDescription>
20      </Alert>
21      <Alert variant="destructive">
22        <DangerTriangle className="size-4" />
23        <AlertTitle>Something went wrong with your submission.</AlertTitle>
24        <AlertDescription>
25          Please check your connection and try again. If the problem persists,
26          contact support.
27          <a
28            href="#"
29            className="inline-flex text-sm font-medium text-destructive underline"
30          >
31            Retry
32          </a>
33        </AlertDescription>
34      </Alert>
35    </>
36  );
37}