Panel groups

import { PanelGroup, PanelLayout, Panel } from "@gpuixui/dock";
import { useState } from "react";

const initial = new PanelLayout({
  orientation: "horizontal",
  panels: [
    new Panel({ id: "sidebar", label: "Sidebar", size: 0.2, collapsible: true }),
    new Panel({ id: "editor", label: "Editor", size: 0.8 }),
  ],
});

const [layout, setLayout] = useState(initial);

<PanelGroup
  layout={layout}
  onLayoutChange={setLayout}
  renderPanel={(id) => <Pane id={id} />}
/>;

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@gpuixui/dock";

<ResizablePanelGroup direction="horizontal" defaultLayout={saved}>
  <ResizablePanel defaultSize={20} id="sidebar" label="Sidebar" collapsible>
    <Explorer />
  </ResizablePanel>
  <ResizableHandle label="Resize the explorer" />
  <ResizablePanel defaultSize={80} id="editor" label="Editor">
    <Editor />
  </ResizablePanel>
</ResizablePanelGroup>;