ui Architecture Docs
Home / File/ dialog-demo.tsx — ui Source File

dialog-demo.tsx — ui Source File

Architecture documentation for dialog-demo.tsx, a tsx file in the ui codebase. 5 imports, 0 dependents.

File tsx DocumentationAtlas SearchAPI 5 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  788640e1_eb58_6b25_18e5_c18337e51561["dialog-demo.tsx"]
  4b1d2128_46d9_46f0_b915_b6e1925b7876["button"]
  788640e1_eb58_6b25_18e5_c18337e51561 --> 4b1d2128_46d9_46f0_b915_b6e1925b7876
  cd433a12_a20e_c2ab_21fc_4d4945c6d923["dialog"]
  788640e1_eb58_6b25_18e5_c18337e51561 --> cd433a12_a20e_c2ab_21fc_4d4945c6d923
  b5f68436_cf6b_fba3_fb29_abf27fd13442["field"]
  788640e1_eb58_6b25_18e5_c18337e51561 --> b5f68436_cf6b_fba3_fb29_abf27fd13442
  9af00736_7b63_3c3c_87d0_68c5200c5d80["input"]
  788640e1_eb58_6b25_18e5_c18337e51561 --> 9af00736_7b63_3c3c_87d0_68c5200c5d80
  2a43f855_1408_526d_d4d2_31c7a87506c6["label"]
  788640e1_eb58_6b25_18e5_c18337e51561 --> 2a43f855_1408_526d_d4d2_31c7a87506c6
  style 788640e1_eb58_6b25_18e5_c18337e51561 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { Button } from "@/examples/radix/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/examples/radix/ui/dialog"
import { Field, FieldGroup } from "@/examples/radix/ui/field"
import { Input } from "@/examples/radix/ui/input"
import { Label } from "@/examples/radix/ui/label"

export function DialogDemo() {
  return (
    <Dialog>
      <form>
        <DialogTrigger asChild>
          <Button variant="outline">Open Dialog</Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-sm">
          <DialogHeader>
            <DialogTitle>Edit profile</DialogTitle>
            <DialogDescription>
              Make changes to your profile here. Click save when you&apos;re
              done.
            </DialogDescription>
          </DialogHeader>
          <FieldGroup>
            <Field>
              <Label htmlFor="name-1">Name</Label>
              <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
            </Field>
            <Field>
              <Label htmlFor="username-1">Username</Label>
              <Input id="username-1" name="username" defaultValue="@peduarte" />
            </Field>
          </FieldGroup>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="outline">Cancel</Button>
            </DialogClose>
            <Button type="submit">Save changes</Button>
          </DialogFooter>
        </DialogContent>
      </form>
    </Dialog>
  )
}

Domain

Subdomains

Functions

Dependencies

  • button
  • dialog
  • field
  • input
  • label

Source

Frequently Asked Questions

What does dialog-demo.tsx do?
dialog-demo.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, SearchAPI subdomain.
What functions are defined in dialog-demo.tsx?
dialog-demo.tsx defines 1 function(s): DialogDemo.
What does dialog-demo.tsx depend on?
dialog-demo.tsx imports 5 module(s): button, dialog, field, input, label.
Where is dialog-demo.tsx in the architecture?
dialog-demo.tsx is located at apps/v4/examples/radix/dialog-demo.tsx (domain: DocumentationAtlas, subdomain: SearchAPI, directory: apps/v4/examples/radix).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free