Dialog

1"use client"
2 
3import * as React from "react"
4 
5import {
6  Example,
7  ExampleWrapper,
8} from "@/registry/base-vega/components/example"
9import { Button } from "@/registry/base-vega/ui/button"
10import { Checkbox } from "@/registry/base-vega/ui/checkbox"
11import {
12  Dialog,
13  DialogClose,
14  DialogContent,
15  DialogDescription,
16  DialogFooter,
17  DialogHeader,
18  DialogTitle,
19  DialogTrigger,
20} from "@/registry/base-vega/ui/dialog"
21import {
22  Field,
23  FieldContent,
24  FieldDescription,
25  FieldGroup,
26  FieldLabel,
27  FieldSeparator,
28  FieldSet,
29  FieldTitle,
30} from "@/registry/base-vega/ui/field"
31import { Input } from "@/registry/base-vega/ui/input"
32import {
33  InputGroup,
34  InputGroupAddon,
35  InputGroupButton,
36  InputGroupInput,
37} from "@/registry/base-vega/ui/input-group"
38import { Kbd } from "@/registry/base-vega/ui/kbd"
39import {
40  NativeSelect,
41  NativeSelectOption,
42} from "@/registry/base-vega/ui/native-select"
43import {
44  Select,
45  SelectContent,
46  SelectGroup,
47  SelectItem,
48  SelectSeparator,
49  SelectTrigger,
50  SelectValue,
51} from "@/registry/base-vega/ui/select"
52import { Switch } from "@/registry/base-vega/ui/switch"
53import {
54  Tabs,
55  TabsContent,
56  TabsList,
57  TabsTrigger,
58} from "@/registry/base-vega/ui/tabs"
59import { Textarea } from "@/registry/base-vega/ui/textarea"
60import {
61  Tooltip,
62  TooltipContent,
63  TooltipTrigger,
64} from "@/registry/base-vega/ui/tooltip"
65import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
66 
67export default function DialogExample() {
68  return (
69    <ExampleWrapper>
70      <DialogWithForm />
71      <DialogScrollableContent />
72      <DialogWithStickyFooter />
73      <DialogNoCloseButton />
74      <DialogChatSettings />
75    </ExampleWrapper>
76  )
77}
78 
79function DialogWithForm() {
80  return (
81    <Example title="With Form" className="items-center justify-center">
82      <Dialog>
83        <form>
84          <DialogTrigger render={<Button variant="outline" />}>
85            Edit Profile
86          </DialogTrigger>
87          <DialogContent>
88            <DialogHeader>
89              <DialogTitle>Edit profile</DialogTitle>
90              <DialogDescription>
91                Make changes to your profile here. Click save when you&apos;re
92                done. Your profile will be updated immediately.
93              </DialogDescription>
94            </DialogHeader>
95            <FieldGroup>
96              <Field>
97                <FieldLabel htmlFor="name-1">Name</FieldLabel>
98// … truncated