File size: 1,158 Bytes
9b906ea | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | import { useState } from "react";
import { cn } from "#/utils/utils";
interface ResizeHandleProps {
onMouseDown: (e: React.MouseEvent) => void;
className?: string;
/** While the parent panel drag is active, keep the grip line highlighted. */
isDragging?: boolean;
testId?: string;
}
export function ResizeHandle({
onMouseDown,
className,
isDragging = false,
testId,
}: ResizeHandleProps) {
const [isHovering, setIsHovering] = useState(false);
const lineActive = isDragging || isHovering;
return (
<div
data-testid={testId}
className={cn("relative z-10 w-0 shrink-0 self-stretch", className)}
aria-hidden
>
<div
className="absolute inset-y-0 left-1/2 w-3 min-w-[12px] -translate-x-1/2 cursor-ew-resize"
onMouseDown={onMouseDown}
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
/>
<div
className={cn(
"pointer-events-none absolute inset-y-0 left-1/2 w-px -translate-x-1/2 transition-colors",
lineActive ? "bg-white" : "bg-transparent",
)}
aria-hidden
/>
</div>
);
}
|