Resizable Split Pane

Build a React component that displays a split pane layout with a resizable left pane and a right pane that auto-expands. The divider between panes can be dragged horizontally to resize the left pane. The left pane cannot shrink below 100px.

Things to do

• Create a container with left pane, divider, and right pane.
• Set the initial width of the left pane to 200px.
• Allow the user to resize the left pane by dragging the divider.
• Restrict the minimum width of the left pane to 100px.
• Implement mouse events to drag the divider and resize the left pane:
• onMouseDown → start dragging
• onMouseMove → update left pane width
• onMouseUp → stop dragging
• Ensure dragging only works when the mouse is pressed on the divider.
• Update the layout dynamically as the divider moves.
• Style the layout using CSS:
• Use flexbox so the right pane expands automatically.

How it works

• Initial left pane width: 200px
• Drag divider right → increases left pane width
• Drag divider left → decreases left pane width but not below 100px
• Dragging outside without mouse down → No change in width.

ClassNames

Use these classnames in your code:

• Container → container
• Left Pane → left-pane
• Divider → divider
• Right Pane → right-pane

Testing Instructions

Please use the following data-testid attributes in your React component:

• container → for the wrapper div
• left-pane → for the left pane
• divider → for the divider
• right-pane → for the right pane