Dialog

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