ResizableRtl() — ui Function Reference

Architecture documentation for the ResizableRtl() function in resizable-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ ResizableRtl() — ui Function Reference

Dependency Diagram

graph TD
  d6984487_e039_7de0_4b87_d56d452782a4["ResizableRtl()"]
  0ca1a529_e290_aaa7_efde_398e4f626fda["resizable-rtl.tsx"]
  d6984487_e039_7de0_4b87_d56d452782a4 -->|defined in| 0ca1a529_e290_aaa7_efde_398e4f626fda
  style d6984487_e039_7de0_4b87_d56d452782a4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/resizable-rtl.tsx lines 42–74

export function ResizableRtl() {
  const { dir, t } = useTranslation(translations, "ar")

  return (
    <ResizablePanelGroup
      orientation="horizontal"
      className="max-w-sm rounded-lg border"
      dir={dir}
    >
      <ResizablePanel defaultSize="50%">
        <div className="flex h-[200px] items-center justify-center p-6">
          <span className="font-semibold">{t.one}</span>
        </div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize="50%">
        <ResizablePanelGroup orientation="vertical" dir={dir}>
          <ResizablePanel defaultSize="25%">
            <div className="flex h-full items-center justify-center p-6">
              <span className="font-semibold">{t.two}</span>
            </div>
          </ResizablePanel>
          <ResizableHandle withHandle />
          <ResizablePanel defaultSize="75%">
            <div className="flex h-full items-center justify-center p-6">
              <span className="font-semibold">{t.three}</span>
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}