Bishop Moves

Build a React component that shows an 8x8 chessboard. When a user hovers or clicks on a square, highlight all the diagonal cells a bishop can move to. Clear highlights on mouse leave or new selection.

Requirements

1. Render an 8×8 board = 64 cells.
2. Each cell must use role="gridcell"
3. When the user hovers over a square, it:

• Highlights that cell with the CSS class "hovered"
• Highlights all diagonally reachable squares from the hovered cell using the CSS class bishop-move

4. Clear all highlights on mouse leave.

Edge Cases

• Hover or click on (0,0) → Should highlight only the diagonal from (1,1) to (7,7)

• Rapid hover on and off the board → Highlights should clear immediately when the cursor leaves

• Multiple selections (hover/click repeatedly) → Only the latest bishop path should be visible; previous highlights should be cleared

• Hover on a middle cell (e.g., 3,3) → Should highlight all 4 diagonals from that point, respecting board boundaries

Reference UI