قابل تغییر اندازه (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>