こんな感じでしょうか。
js
1import React, { useState } from 'react'
2import { Flipper, Flipped } from 'react-flip-toolkit'
3import './FlipImages.css';
4
5const FlipImages = ({ images }) => {
6 const [selection, setSelection] = useState(null)
7
8 return (
9 <Flipper flipKey={selection}>
10 <div className='container'>
11 <div className='column-1'>
12 {images.map((image, index) => (
13 <div key={index} className='thumbnail'>
14 {index !== selection &&
15 <Flipped flipId={index}>
16 <img className='thumbnail' src={image} alt='' onClick={() => setSelection(index)} />
17 </Flipped>
18 }
19 </div>
20 ))}
21 </div>
22 <div className='column-2'>
23 {selection !== null &&
24 <Flipped flipId={selection}>
25 <img className='main-image' src={images[selection]} alt='' onClick={() => setSelection(null)} />
26 </Flipped>
27 }
28 </div>
29 </div>
30 </Flipper>
31 )
32}
33
34export default FlipImages;
css
1.container {
2 display: flex;
3 gap: 16px;
4}
5
6.column-1 {
7 display: flex;
8 flex-direction: column;
9 gap: 16px;
10}
11
12.thumbnail {
13 width: 128px;
14 height: 128px;
15 background-color: lightgray;
16}
17
18.column-2,
19.main-image {
20 width: 560px;
21 height: 560px;
22 background-color: lightgray;
23}