Info Alert Dialog

1import { CircleFadingArrowUp, Rocket } from "lucide-react";
2import {
3  AlertDialog,
4  AlertDialogAction,
5  AlertDialogCancel,
6  AlertDialogContent,
7  AlertDialogDescription,
8  AlertDialogFooter,
9  AlertDialogHeader,
10  AlertDialogTitle,
11  AlertDialogTrigger,
12} from "@/registry/ui/alert-dialog";
13import { Badge } from "@/registry/ui/badge";
14import { Button } from "@/registry/ui/button";
15 
16export default function AlertDialogInfo() {
17  return (
18    <AlertDialog>
19      <AlertDialogTrigger asChild>
20        <Button variant="outline">Show Dialog</Button>
21      </AlertDialogTrigger>
22      <AlertDialogContent className="sm:max-w-lg!">
23        <AlertDialogHeader>
24          <div className="mx-auto mb-2 flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 sm:mx-0">
25            <CircleFadingArrowUp className="h-[18px] w-[18px] text-primary" />
26          </div>
27          <AlertDialogTitle className="font-semibold text-2xl tracking-[-0.015em]">
28            New Software Update Available
29          </AlertDialogTitle>
30          <AlertDialogDescription className="text-[15px]">
31            A new software update is available for your device. Please update to
32            the latest version to continue using the app.
33          </AlertDialogDescription>
34          <div className="mt-6! flex flex-wrap gap-2">
35            <Badge variant="outline">Faster Performance</Badge>
36            <Badge variant="outline">Advanced Blocks</Badge>
37            <Badge variant="outline">Customized Components</Badge>
38            <Badge variant="outline">UI Revamp</Badge>
39            <Badge variant="outline">Security Improvements</Badge>
40            <Badge variant="outline">Other Improvements</Badge>
41            <Badge variant="outline">Bug Fixes</Badge>
42            <Badge variant="outline">+ much more</Badge>
43          </div>
44        </AlertDialogHeader>
45        <AlertDialogFooter className="mt-4">
46          <AlertDialogCancel>Cancel</AlertDialogCancel>
47          <AlertDialogAction>
48            <Rocket /> Update Now
49          </AlertDialogAction>
50        </AlertDialogFooter>
51      </AlertDialogContent>
52    </AlertDialog>
53  );
54}