リサイズ可能ResizableExperimental

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@gunjo/ui";

export function ResizableWorkspace() {
  return (
    <div className="h-64 w-full max-w-2xl overflow-hidden rounded-lg border">
      <ResizablePanelGroup direction="horizontal" defaultLayout={{
        sidebar: 32,
        canvas: 68,
      }} className="h-full w-full">
        <ResizablePanel id="sidebar" defaultSize="32%" minSize="20%">
          <div className="flex h-full items-center justify-center p-4">サイドバー</div>
        </ResizablePanel>
        <ResizableHandle withHandle />
        <ResizablePanel id="canvas" defaultSize="68%" minSize="40%">
          <div className="flex h-full items-center justify-center p-4">キャンバス</div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}