Dialog with Input Field

1'use client';
2import { AlertTriangleIcon } from 'lucide-react';
3import { useState } from 'react';
4import { Button } from '@/components/ui/button';
5import {
6  Dialog,
7  DialogClose,
8  DialogContent,
9  DialogDescription,
10  DialogFooter,
11  DialogHeader,
12  DialogTitle,
13  DialogTrigger,
14} from '@/components/ui/dialog';
15 
16export default function Dialog02() {
17  const [open, setOpen] = useState(true);
18 
19  return (
20    <Dialog onOpenChange={setOpen} open={open}>
21      <DialogTrigger render={<Button variant="destructive" />}>
22        Deactivate
23      </DialogTrigger>
24      <DialogContent className="sm:max-w-lg">
25        <div className="flex items-start space-x-4">
26          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-red-100">
27            <AlertTriangleIcon className="h-6 w-6 text-red-600" />
28          </div>
29          <DialogHeader>
30            <DialogTitle>Deactivate account</DialogTitle>
31            <DialogDescription>
32              Are you sure you want to deactivate your account? All of your data
33              will be permanently removed. This action cannot be undone.
34            </DialogDescription>
35          </DialogHeader>
36        </div>
37        <DialogFooter>
38          <DialogClose render={<Button variant="outline" />}>
39            Cancel
40          </DialogClose>
41          <Button onClick={() => setOpen(false)} variant="destructive">
42            Deactivate
43          </Button>
44        </DialogFooter>
45      </DialogContent>
46    </Dialog>
47  );
48}