resizable-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "resizable-example",
  "title": "Resizable",
  "registryDependencies": [
    "resizable",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-mira/examples/resizable-example.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/base-mira/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}