Split screen

import { useState, type ReactNode } from 'react';

const MIN = 25; // percent of the width for each pane
const STEP = 5;

type Props = { left: ReactNode; right: ReactNode };

export function SplitView({ left, right }: Props) {
  const [split, setSplit] = useState(
    () => Number(localStorage.getItem('split')) || 50
  );

  function resize(next: number) {
    const value = Math.min(100 - MIN, Math.max(MIN, next));
    setSplit(value);
    localStorage.setItem('split', String(value));
  }

  return (
    <div
      className='grid h-full'
      style={{ gridTemplateColumns: `${split}% 9px 1fr` }}
    >
      <div className='min-w-0 overflow-auto'>{left}</div>
      {/* A 9px grab area around a 1px line. */}
      <div
        role='separator'
        aria-orientation='vertical'
        aria-label='Resize panes'
        aria-valuenow={Math.round(split)}
        tabIndex={0}
        className='group flex cursor-col-resize touch-none justify-center outline-none'
        onPointerDown={(event) =>
          event.currentTarget.setPointerCapture(event.pointerId)
        }
        onPointerMove={(event) => {
          if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
          const box =
            event.currentTarget.parentElement!.getBoundingClientRect();
          resize(((event.clientX - box.left) / box.width) * 100);
        }}
        onKeyDown={(event) => {
          if (event.key === 'ArrowLeft') resize(split - STEP);
          if (event.key === 'ArrowRight') resize(split + STEP);
        }}
      >
        <div className='w-px bg-border group-hover:w-0.5 group-hover:bg-blue-500 group-focus-visible:w-0.5 group-focus-visible:bg-blue-500' />
      </div>
      <div className='min-w-0 overflow-auto'>{right}</div>
    </div>
  );
}