import React, { useEffect, useRef } from 'react'; import { Activity, Table, X } from 'lucide-react'; export type BottomPanelTab = 'table' | 'eps'; interface BottomPanelProps { activeTab: BottomPanelTab | null; height: number; epsAvailable: boolean; onToggleTab: (tab: BottomPanelTab) => void; onHeightChange: (height: number) => void; tableContent: React.ReactNode; epsContent: React.ReactNode; } export const BottomPanel: React.FC = ({ activeTab, height, epsAvailable, onToggleTab, onHeightChange, tableContent, epsContent, }) => { const dragRef = useRef<{ startY: number; startHeight: number } | null>(null); useEffect(() => { const handleMove = (event: PointerEvent) => { const drag = dragRef.current; if (!drag) return; const next = Math.min( Math.max(drag.startHeight + drag.startY - event.clientY, 160), Math.floor(window.innerHeight * 0.7) ); onHeightChange(next); }; const handleUp = () => { dragRef.current = null; document.body.style.cursor = ''; document.body.style.userSelect = ''; }; window.addEventListener('pointermove', handleMove); window.addEventListener('pointerup', handleUp); return () => { window.removeEventListener('pointermove', handleMove); window.removeEventListener('pointerup', handleUp); }; }, [onHeightChange]); if (!activeTab) return null; return (

{ dragRef.current = { startY: event.clientY, startHeight: height }; document.body.style.cursor = 'ns-resize'; document.body.style.userSelect = 'none'; event.currentTarget.setPointerCapture(event.pointerId); }} style={{ position: 'absolute', top: -4, left: 0, right: 0, height: 8, cursor: 'ns-resize', zIndex: 2, }} />