Function Resizable

app/components/Resizable.tsx:11–105

({
  children,
  isHorizontal = true,
  initialSize,
  minimumSize,
  maximumSize,
}: ResizableProps)

};

export default function Resizable({
  children,
  isHorizontal = true,
  initialSize,
  minimumSize,
  maximumSize,
}: ResizableProps) {
  const [dimension, setDimension] = useState(initialSize);
  const previousDragPosition = useRef<{ x: number; y: number } | null>(null);

  const handleDragStart = (e: React.MouseEvent<HTMLDivElement>): void => {
    previousDragPosition.current = {
      x: e.clientX,
      y: e.clientY,
    };
  };

  const handleDrag = (e: MouseEvent) => {
    if (previousDragPosition.current == null) {
      return;
    }

    e.preventDefault();

    let offset = 0;
    if (isHorizontal) {
      offset = e.clientX - previousDragPosition.current.x;
    } else {
      offset = e.clientY - previousDragPosition.current.y;
    }
    let newValue = dimension - offset;
    if (minimumSize != null) {
      newValue = Math.max(minimumSize, newValue);
    }
    if (maximumSize != null) {
      newValue = Math.min(maximumSize, newValue);
    }
    setDimension(newValue);
    previousDragPosition.current = {
      x: e.clientX,
      y: e.clientY,
    };
  };

  const handleDragEnd = () => {
    previousDragPosition.current = null;
  };

  useEffect(() => {
    window.addEventListener("mousemove", handleDrag);
    window.addEventListener("mouseup", handleDragEnd);
    return () => {
      window.removeEventListener("mousemove", handleDrag);
      window.removeEventListener("mouseup", handleDragEnd);
    };
  }, [handleDrag, handleDragEnd]);

  const style = () => {