Resizable panels

"use client";

import { ResizeHandle, useResizableWidth } from "@/components/ui/resizable-panel";

export default function Example() {
  const panel = useResizableWidth({ defaultWidth: 320, minWidth: 240, maxWidth: 480 });

  return (
    <aside ref={panel.containerRef} style={{ width: panel.width }} className="relative border-l p-4"><ResizeHandle resizing={panel.resizing} onPointerDown={panel.beginResize} value={panel.width} minValue={240} maxValue={480} onValueChange={panel.resizeTo} label="Resize panel" />Panel content</aside>
  );
}