Dialog

1import { Button } from "@/components/ui/button"
2import {
3  Dialog,
4  DialogContent,
5  DialogDescription,
6  DialogFooter,
7  DialogHeader,
8  DialogTitle,
9  DialogTrigger,
10} from "@/components/ui/dialog"
11import { Input } from "@/components/ui/input"
12import { Label } from "@/components/ui/label"
13
14export function DefaultDialog() {
15  return (
16    <Dialog>
17      <DialogTrigger asChild>
18        <Button variant="outline">Edit Profile</Button>
19      </DialogTrigger>
20      <DialogContent className="sm:max-w-[425px]">
21        <DialogHeader>
22          <DialogTitle>Edit profile</DialogTitle>
23          <DialogDescription>
24            Make changes to your profile here. Click save when you're done.
25          </DialogDescription>
26        </DialogHeader>
27        <div className="grid gap-4 py-4">
28          <div className="grid grid-cols-4 items-center gap-4">
29            <Label htmlFor="name" className="text-right">
30              Name
31            </Label>
32            <Input id="name" defaultValue="Pedro Duarte" className="col-span-3" />
33          </div>
34          <div className="grid grid-cols-4 items-center gap-4">
35            <Label htmlFor="username" className="text-right">
36              Username
37            </Label>
38            <Input id="username" defaultValue="@peduarte" className="col-span-3" />
39          </div>
40        </div>
41        <DialogFooter>
42          <Button type="submit">Save changes</Button>
43        </DialogFooter>
44      </DialogContent>
45    </Dialog>
46  )
47}