قابل تغییر اندازه (Resizable)

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <ResizablePanelGroup direction="horizontal" className="min-h-[200px]">
      <ResizablePanel defaultSize={50}>
        <div className="p-6">پنل اول</div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={50}>
        <div className="p-6">پنل دوم</div>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}

<ResizablePanelGroup direction="vertical" className="min-h-[400px]">
  <ResizablePanel defaultSize={25}>پنل بالا</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={75}>پنل پایین</ResizablePanel>
</ResizablePanelGroup>

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel>پنل ۱</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel>پنل ۲</ResizablePanel>
</ResizablePanelGroup>

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel defaultSize={25} minSize={20}>
    <div>سایدبار</div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>
    <div>محتوای اصلی</div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={25} minSize={20}>
    <div>پنل کناری</div>
  </ResizablePanel>
</ResizablePanelGroup>