Spaces:
Running
Running
| import { useEffect, useState } from 'react'; | |
| const SCREENS = ['Board', 'Results', 'Moves']; | |
| export default function ScreenNav() { | |
| const [current, setCurrent] = useState(0); | |
| useEffect(() => { | |
| const content = document.querySelector('.content'); | |
| if (!content) return undefined; | |
| const onScroll = () => setCurrent(Math.round(content.scrollLeft / content.clientWidth)); | |
| content.addEventListener('scroll', onScroll, { passive: true }); | |
| return () => content.removeEventListener('scroll', onScroll); | |
| }, []); | |
| function goTo(index) { | |
| const content = document.querySelector('.content'); | |
| if (!content) return; | |
| const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; | |
| content.scrollTo({ left: index * content.clientWidth, behavior: reduced ? 'auto' : 'smooth' }); | |
| } | |
| return ( | |
| <nav className="screen-nav" aria-label="Screens"> | |
| {SCREENS.map((label, i) => ( | |
| <button key={label} type="button" className="screen-nav__item" | |
| aria-current={i === current ? 'page' : undefined} onClick={() => goTo(i)}> | |
| {label} | |
| </button> | |
| ))} | |
| </nav> | |
| ); | |
| } | |