Resizable Panel

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@sigil-ui/components";

<ResizablePanelGroup orientation="horizontal" className="min-h-[120px] border border-[var(--s-border)]">
  <ResizablePanel>Left</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Right</ResizablePanel>
</ResizablePanelGroup>

<ResizablePanelGroup orientation="vertical" className="h-[400px]">
  <ResizablePanel defaultSize="60%">
    <div className="p-4">Editor</div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize="40%">
    <div className="p-4">Terminal</div>
  </ResizablePanel>
</ResizablePanelGroup>

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize="20%" minSize="15%">Sidebar</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize="50%">Editor</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize="30%" minSize="20%">Preview</ResizablePanel>
</ResizablePanelGroup>