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

resizable-demo.tsx — ui Source File

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

File tsx DocumentationAtlas Changelog 1 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  c37847ed_0c31_3d6f_b72b_fd6a84c36643["resizable-demo.tsx"]
  14a9bcbf_eff5_6157_33d6_e1c299e1d3ed["resizable"]
  c37847ed_0c31_3d6f_b72b_fd6a84c36643 --> 14a9bcbf_eff5_6157_33d6_e1c299e1d3ed
  style c37847ed_0c31_3d6f_b72b_fd6a84c36643 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/examples/base/ui/resizable"

export default function ResizableDemo() {
  return (
    <ResizablePanelGroup
      orientation="horizontal"
      className="max-w-sm rounded-lg border"
    >
      <ResizablePanel defaultSize="50%">
        <div className="flex h-[200px] items-center justify-center p-6">
          <span className="font-semibold">One</span>
        </div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize="50%">
        <ResizablePanelGroup orientation="vertical">
          <ResizablePanel defaultSize="25%">
            <div className="flex h-full items-center justify-center p-6">
              <span className="font-semibold">Two</span>
            </div>
          </ResizablePanel>
          <ResizableHandle withHandle />
          <ResizablePanel defaultSize="75%">
            <div className="flex h-full items-center justify-center p-6">
              <span className="font-semibold">Three</span>
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}

Domain

Subdomains

Functions

Dependencies

  • resizable

Source

Frequently Asked Questions

What does resizable-demo.tsx do?
resizable-demo.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, Changelog subdomain.
What functions are defined in resizable-demo.tsx?
resizable-demo.tsx defines 1 function(s): ResizableDemo.
What does resizable-demo.tsx depend on?
resizable-demo.tsx imports 1 module(s): resizable.
Where is resizable-demo.tsx in the architecture?
resizable-demo.tsx is located at apps/v4/examples/base/resizable-demo.tsx (domain: DocumentationAtlas, subdomain: Changelog, 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