54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
/**
|
|
* PaneSplitDropZone - Half-pane drop zones for creating new panes via tab drag.
|
|
* Covers the left or right half of the pane. When a tab is dragged over a half,
|
|
* a semi-transparent accent overlay highlights the target area.
|
|
*/
|
|
|
|
import { useDroppable } from '@dnd-kit/core';
|
|
|
|
interface PaneSplitDropZoneProps {
|
|
paneId: string;
|
|
side: 'left' | 'right';
|
|
isActive: boolean;
|
|
}
|
|
|
|
export const PaneSplitDropZone = ({
|
|
paneId,
|
|
side,
|
|
isActive,
|
|
}: PaneSplitDropZoneProps): React.JSX.Element => {
|
|
const { setNodeRef, isOver } = useDroppable({
|
|
id: `split-${side}-${paneId}`,
|
|
data: {
|
|
type: 'split-zone',
|
|
paneId,
|
|
side,
|
|
},
|
|
});
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
className="absolute top-0 z-30"
|
|
style={{
|
|
[side]: 0,
|
|
width: '50%',
|
|
height: '100%',
|
|
pointerEvents: isActive ? 'auto' : 'none',
|
|
}}
|
|
>
|
|
{/* Semi-transparent overlay highlight when hovering */}
|
|
{isOver && (
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{
|
|
backgroundColor: 'var(--color-accent, #6366f1)',
|
|
opacity: 0.12,
|
|
borderLeft: side === 'right' ? '2px solid var(--color-accent, #6366f1)' : 'none',
|
|
borderRight: side === 'left' ? '2px solid var(--color-accent, #6366f1)' : 'none',
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|