Callout Alert

1import { CircleFadingArrowUpIcon } from "lucide-react";
2import { Alert, AlertTitle } from "@/registry/ui/alert";
3 
4export default function AlertCalloutDemo() {
5  return (
6    <div className="w-full space-y-4">
7      <Alert className="rounded-none border-0 border-l-4 border-l-blue-500 bg-blue-500/10 dark:bg-blue-500/20">
8        <CircleFadingArrowUpIcon className="h-4 w-4 text-blue-500!" />
9        <AlertTitle>A new version of the app is now available.</AlertTitle>
10      </Alert>
11      <Alert className="rounded-none border-blue-300 border-l-4 border-l-blue-500 bg-blue-500/10 dark:border-blue-500/60 dark:border-l-blue-500 dark:bg-blue-600/20">
12        <CircleFadingArrowUpIcon className="h-4 w-4 text-blue-500!" />
13        <AlertTitle>A new version of the app is now available.</AlertTitle>
14      </Alert>
15      <Alert className="border-0 border-l-4 border-l-blue-500 bg-blue-500/10 dark:bg-blue-500/20">
16        <CircleFadingArrowUpIcon className="h-4 w-4 text-blue-500!" />
17        <AlertTitle>A new version of the app is now available.</AlertTitle>
18      </Alert>
19      <Alert className="border-blue-300 border-l-4 border-l-blue-500 bg-blue-500/10 dark:border-blue-500/60 dark:border-l-blue-500 dark:bg-blue-600/20">
20        <CircleFadingArrowUpIcon className="h-4 w-4 text-blue-500!" />
21        <AlertTitle>A new version of the app is now available.</AlertTitle>
22      </Alert>
23    </div>
24  );
25}