Pagination UI

Build a pagination control as a single React component. There are five pages. It looks like several independent buttons, but doing it right means one number — the current page — is the source of truth, and the highlighted page, the disabled ends, and the status line all read from it.

Task

The starter App.tsx renders the pager in its page 1 state. Make it interactive (totalPages = 5):

1. Hold the state. Track the current page with useState(1).
2. Move between pages. A goTo(p) sets the current page, clamped to [1, 5]. Prev goes to current - 1, Next to current + 1 — the clamp keeps them in range.
3. Reflect it three ways. The page whose number equals current gets the active class; Prev is disabled on page 1 and Next on page 5; the status line reads Page 3 of 5.

Examples

• The page loads with 1 highlighted, Prev disabled, and "Page 1 of 5". Clicking 3 highlights 3 and shows "Page 3 of 5".
• On page 5, Next is disabled; on page 1, Prev is disabled. Clicking Next repeatedly stops at 5 rather than running past it.
• Clicking a number jumps straight there; Prev/Next step by one.

Notes

• This is pure pagination UI. There's no list or data being paged — the point is the control and its state, not fetching a page of results.
• One number, three effects. Don't track "which button is active", "are the ends disabled", and "the label" separately — derive all three from current.
• Clamp in one place. Do the Math.min/Math.max inside goTo, so Prev, Next, and any direct jump all stay in [1, 5] for free.
• Styling (dark theme, buttons, active highlight) is already in styles.css; focus on the state.