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, 1 dependents.

File tsx DocumentationAtlas Changelog 1 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  57c5db40_feb3_f104_9fcd_7dd2c737858f["resizable-demo.tsx"]
  852e6756_fc4e_e7e0_8729_0889c797a1e2["resizable"]
  57c5db40_feb3_f104_9fcd_7dd2c737858f --> 852e6756_fc4e_e7e0_8729_0889c797a1e2
  1c2403dc_4584_9f39_4e98_855a7de18bd1["component-registry.ts"]
  1c2403dc_4584_9f39_4e98_855a7de18bd1 --> 57c5db40_feb3_f104_9fcd_7dd2c737858f
  style 57c5db40_feb3_f104_9fcd_7dd2c737858f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/registry/new-york-v4/ui/resizable"

export function ResizableDemo() {
  return (
    <div className="flex w-full flex-col gap-6">
      <ResizablePanelGroup
        orientation="horizontal"
        className="max-w-md rounded-lg border md:min-w-[450px]"
      >
        <ResizablePanel defaultSize="50%">
          <div className="flex h-[200px] items-center justify-center p-6">
            <span className="font-semibold">One</span>
          </div>
        </ResizablePanel>
        <ResizableHandle />
        <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 />
            <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>
      <ResizablePanelGroup
        orientation="horizontal"
        className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
      >
        <ResizablePanel defaultSize="25%">
          <div className="flex h-full items-center justify-center p-6">
            <span className="font-semibold">Sidebar</span>
          </div>
        </ResizablePanel>
        <ResizableHandle withHandle />
        <ResizablePanel defaultSize="75%">
          <div className="flex h-full items-center justify-center p-6">
            <span className="font-semibold">Content</span>
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
      <ResizablePanelGroup
        orientation="vertical"
        className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
      >
        <ResizablePanel defaultSize="25%">
          <div className="flex h-full items-center justify-center p-6">
            <span className="font-semibold">Header</span>
          </div>
        </ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize="75%">
          <div className="flex h-full items-center justify-center p-6">
            <span className="font-semibold">Content</span>
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  )
}

Domain

Subdomains

Functions

Dependencies

  • resizable

Imported By

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.
What files import resizable-demo.tsx?
resizable-demo.tsx is imported by 1 file(s): component-registry.ts.
Where is resizable-demo.tsx in the architecture?
resizable-demo.tsx is located at apps/v4/app/(internal)/sink/components/resizable-demo.tsx (domain: DocumentationAtlas, subdomain: Changelog, directory: apps/v4/app/(internal)/sink/components).

Analyze Your Own Codebase

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

Try Supermodel Free