Dialog Confirmation

1'use client';
2 
3import { Check } from 'lucide-react';
4import { useState } from 'react';
5import { Button } from '@/components/ui/button';
6import {
7  Dialog,
8  DialogClose,
9  DialogContent,
10  DialogDescription,
11  DialogFooter,
12  DialogHeader,
13  DialogTitle,
14  DialogTrigger,
15} from '@/components/ui/dialog';
16 
17export default function Dialog01() {
18  const [open, setOpen] = useState(true);
19 
20  return (
21    <Dialog onOpenChange={setOpen} open={open}>
22      <DialogTrigger render={<Button variant="outline" />}>
23        Show Dialog
24      </DialogTrigger>
25 
26      <DialogContent className="flex flex-col items-center sm:max-w-sm">
27        <div className="flex justify-center">
28          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
29            <Check className="h-6 w-6 text-green-600" />
30          </div>
31        </div>
32 
33        <DialogHeader className="gap-0 text-center">
34          <DialogTitle className="text-balance text-center">
35            Payment successful
36          </DialogTitle>
37          <DialogDescription className="mx-auto mt-2 text-pretty text-center sm:max-w-[90%]">
38            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur
39            amet labore.
40          </DialogDescription>
41        </DialogHeader>
42        <DialogFooter className="w-full sm:justify-center">
43          <DialogClose render={<Button className="w-full" />}>
44            Go back to dashboard
45          </DialogClose>
46        </DialogFooter>
47      </DialogContent>
48    </Dialog>
49  );
50}