Dialog

1'use client';
2
3import { Button } from '@/components/ui/button';
4import {
5  Dialog,
6  DialogClose,
7  DialogContent,
8  DialogDescription,
9  DialogFooter,
10  DialogHeader,
11  DialogTitle,
12  DialogTrigger,
13} from '@/components/ui/dialog';
14
15export function DialogDemo() {
16  return (
17    <Dialog>
18      <DialogTrigger asChild>
19        <Button variant="outline">Open Dialog</Button>
20      </DialogTrigger>
21
22      <DialogContent className="sm:max-w-md">
23        <DialogHeader>
24          <DialogTitle>System Update</DialogTitle>
25          <DialogDescription>
26            A new version of the platform is available. Please review the changes before continuing.
27          </DialogDescription>
28        </DialogHeader>
29
30        <div className="text-muted-foreground space-y-4 text-sm">
31          <p>
32            This update includes important security patches and performance improvements to ensure a
33            smoother and safer experience.
34          </p>
35          <p>
36            Make sure to save your work and log out properly before the update is applied. The
37            system will automatically restart during off-peak hours.
38          </p>
39        </div>
40
41        <DialogFooter>
42          <DialogClose asChild>
43            <Button variant="outline">Dismiss</Button>
44          </DialogClose>
45          <Button>View Details</Button>
46        </DialogFooter>
47      </DialogContent>
48    </Dialog>
49  );
50}