Resizable Panel

1'use client';
2import React, { useState, useEffect, useCallback, type ReactNode } from 'react';
3import Link from 'next/link';
4import { Code2 } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function ResizablePanelSection() {
29  const [width, setWidth] = useState(50);
30  const [dragging, setDragging] = useState(false);
31  const containerRef = React.useRef<HTMLDivElement>(null);
32
33  const handleMouseMove = useCallback((e: MouseEvent) => {
34    if (!dragging || !containerRef.current) return;
35    const rect = containerRef.current.getBoundingClientRect();
36    const pct = ((e.clientX - rect.left) / rect.width) * 100;
37    setWidth(Math.max(20, Math.min(80, pct)));
38  }, [dragging]);
39
40  const handleMouseUp = useCallback(() => { setDragging(false); }, []);
41
42  useEffect(() => {
43    if (dragging) { window.addEventListener('mousemove', handleMouseMove); window.addEventListener('mouseup', handleMouseUp); }
44    return () => { window.removeEventListener('mousemove', handleMouseMove); window.removeEventListener('mouseup', handleMouseUp); };
45  }, [dragging, handleMouseMove, handleMouseUp]);
46
47  return (
48    <SectionCard title="Resizable Panel" sourceSlug="/ui/source/ui-elements/resizable-panel">
49      <div ref={containerRef} className="flex h-48 rounded-xl border border-gray-200 dark:border-white/5 overflow-hidden select-none">
50        <div style={{ width: `${width}%` }} className="flex items-center justify-center bg-brand-50 dark:bg-brand-500/10 p-4 overflow-hidden">
51          <div className="text-center">
52            <p className="text-sm font-semibold text-brand-600 dark:text-brand-400">Panel A</p>
53            <p className="text-xs text-brand-500/70">{Math.round(width)}%</p>
54          </div>
55        </div>
56        <div onMouseDown={() => setDragging(true)} className={`flex w-2 cursor-col-resize items-center justify-center bg-gray-200 hover:bg-brand-500 transition-colors ${dragging ? 'bg-brand-500' : ''} dark:bg-white/10 dark:hover:bg-brand-500`}>
57          <div className={`h-8 w-0.5 rounded-full ${dragging ? 'bg-white' : 'bg-gray-400 dark:bg-gray-500'}`} />
58        </div>
59        <div className="flex flex-1 items-center justify-center bg-gray-50 dark:bg-white/5 p-4">
60          <div className="text-center">
61            <p className="text-sm font-semibold text-gray-600 dark:text-gray-400">Panel B</p>
62            <p className="text-xs text-gray-400">{Math.round(100 - width)}%</p>
63          </div>
64        </div>
65      </div>
66    </SectionCard>
67  );
68}