{ + const container = e.currentTarget; + if (e.key === 'ArrowUp') { + e.preventDefault(); + container.scrollTop -= 50; + } else if (e.key === 'ArrowDown') { + e.preventDefault(); + container.scrollTop += 50; + } else if (e.key === 'PageUp') { + e.preventDefault(); + container.scrollTop -= container.clientHeight; + } else if (e.key === 'PageDown') { + e.preventDefault(); + container.scrollTop += container.clientHeight; + } else if (e.key === 'Home') { + e.preventDefault(); + container.scrollTop = 0; + } else if (e.key === 'End') { + e.preventDefault(); + container.scrollTop = container.scrollHeight; + } + }} + > + }> + + } /> + + } + /> + } /> + } /> + } + /> + } /> + {/* Catch-all route for unmatched paths */} + } /> + + +