Resizable

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable"

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel>One</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>

function ResizablePanelGroup({
  className,
  ...props
}: ResizablePrimitive.GroupProps)

function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps)

function ResizableHandle({
  withHandle,
  className,
  ...props
}: ResizablePrimitive.SeparatorProps & {
  withHandle?: boolean
})

<ResizablePanelGroup orientation="horizontal" className="min-h-[200px]">
  <ResizablePanel defaultSize="50%">
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Panel One</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize="50%">
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Panel Two</span>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>

<ResizablePanelGroup orientation="vertical" className="min-h-[400px]">
  <ResizablePanel defaultSize="50%">
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Top Panel</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize="50%">
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Bottom Panel</span>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize="50%">Panel One</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize="50%">Panel Two</ResizablePanel>
</ResizablePanelGroup>

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize="25%">Sidebar</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize="50%">Main Content</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize="25%">Details</ResizablePanel>
</ResizablePanelGroup>

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize="50%">
    <ResizablePanelGroup orientation="vertical">
      <ResizablePanel defaultSize="50%">Top Left</ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize="50%">Bottom Left</ResizablePanel>
    </ResizablePanelGroup>
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize="50%">Right Panel</ResizablePanel>
</ResizablePanelGroup>

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize="30%" minSize="20%" maxSize="40%">
    Constrained Panel
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Flexible Panel</ResizablePanel>
</ResizablePanelGroup>

<ResizablePanelGroup orientation="horizontal" autoSaveId="my-layout">
  <ResizablePanel>Panel One</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Panel Two</ResizablePanel>
</ResizablePanelGroup>