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
  f008bb7a_ab7f_5516_2773_bddb136c1d56["dialog-demo.tsx"]
  4544fa74_9b37_0912_c55e_f4ff161b8e83["button"]
  f008bb7a_ab7f_5516_2773_bddb136c1d56 --> 4544fa74_9b37_0912_c55e_f4ff161b8e83
  1302ba46_078b_fe14_24f5_044257f9b4d6["dialog"]
  f008bb7a_ab7f_5516_2773_bddb136c1d56 --> 1302ba46_078b_fe14_24f5_044257f9b4d6
  e6c524b5_d047_d4f9_50b2_7f100d612cb2["field"]
  f008bb7a_ab7f_5516_2773_bddb136c1d56 --> e6c524b5_d047_d4f9_50b2_7f100d612cb2
  9a309fc5_4306_d01f_08ce_72db23e48652["input"]
  f008bb7a_ab7f_5516_2773_bddb136c1d56 --> 9a309fc5_4306_d01f_08ce_72db23e48652
  e632ae84_c5fb_40c9_7b9d_82d10e757faf["label"]
  f008bb7a_ab7f_5516_2773_bddb136c1d56 --> e632ae84_c5fb_40c9_7b9d_82d10e757faf
  style f008bb7a_ab7f_5516_2773_bddb136c1d56 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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

export function DialogDemo() {
  return (
    <Dialog>
      <form>
        <DialogTrigger render={<Button variant="outline" />}>
          Open Dialog
        </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 render={<Button variant="outline" />}>
              Cancel
            </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/base/dialog-demo.tsx (domain: DocumentationAtlas, subdomain: SearchAPI, directory: apps/v4/examples/base).

Analyze Your Own Codebase

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

Try Supermodel Free