Dialog with Two Buttons

1'use client';
2 
3import { useState } from 'react';
4import { Button } from '@/components/ui/button';
5import {
6  Dialog,
7  DialogContent,
8  DialogDescription,
9  DialogFooter,
10  DialogHeader,
11  DialogTitle,
12  DialogTrigger,
13} from '@/components/ui/dialog';
14import { Input } from '@/components/ui/input';
15import { Label } from '@/components/ui/label';
16 
17export default function Dialog03() {
18  const [isOpen, setIsOpen] = useState(true);
19 
20  return (
21    <Dialog onOpenChange={setIsOpen} open={isOpen}>
22      <div className="flex items-center justify-center py-36">
23        <DialogTrigger render={<Button />}>Edit Profile</DialogTrigger>
24      </div>
25 
26      <DialogContent className="sm:max-w-md">
27        <DialogHeader>
28          <DialogTitle>Edit Profile</DialogTitle>
29          <DialogDescription>
30            Make changes to your profile here. Click save when you&apos;re done.
31          </DialogDescription>
32        </DialogHeader>
33        <div className="space-y-2">
34          <Label className="font-medium text-sm" htmlFor="username">
35            Username
36          </Label>
37          <Input
38            id="username"
39            name="username"
40            placeholder="Your username"
41            type="text"
42          />
43        </div>
44        <DialogFooter>
45          <Button className="w-full" type="submit">
46            Save Changes
47          </Button>
48        </DialogFooter>
49      </DialogContent>
50    </Dialog>
51  );
52}