shadcn-ui/apps/v4/public/r/styles/base-nova/resizable-example.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "resizable-example",
  "title": "Resizable",
  "registryDependencies": [
    "resizable",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-nova/examples/resizable-example.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/bases/base/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        direction=\"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        direction=\"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        direction=\"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 direction=\"horizontal\" className=\"rounded-lg border\">\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 direction=\"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 [sizes, setSizes] = React.useState([30, 70])\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayout={(newSizes) => {\n          setSizes(newSizes)\n        }}\n      >\n        <ResizablePanel defaultSize={30} minSize={20}>\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">{Math.round(sizes[0] ?? 30)}%</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={70} minSize={30}>\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">{Math.round(sizes[1] ?? 70)}%</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}