Frontendx
README.md
SOLUTION.md
main.tsxentry
App.tsx
App.css
index.html
vite.config.ts
Installed
react@^19.2.0
react-dom@^19.2.0

Build a Responsive Thumbnail-Based Slideshow Gallery in React

easyreactgallerycssresponsivekeyboard navigationthumbnailsPinterestEtsyWayfairUI Component

Prompt

Create a responsive image gallery in React with a large main display area that shows the currently selected image, and a scrollable row of clickable thumbnail images below it. Clicking any thumbnail instantly updates the main view. Support keyboard arrow key navigation to move between images. Transitions between images should be smooth. The layout should adapt cleanly to both desktop and mobile screen widths.

Store selectedIndex in state to track which image is currently displayed.
Test Results

Build a Responsive Thumbnail-Based Slideshow Gallery in React

Create a responsive image gallery in React with a large main display area that shows the currently selected image, and a scrollable row of clickable thumbnail images below it. Clicking any thumbnail instantly updates the main view. Support keyboard arrow key navigation to move between images. Transitions between images should be smooth. The layout should adapt cleanly to both desktop and mobile screen widths.