PhotoViewer and Image selector working together to display selected t…

…humbnail

src/App.css

@@ -41,14 +41,5 @@
   color: #888;
 }
 
-.thumbnail{
-  border: 1px solid #ddd; /* Gray border */
-  border-radius: 4px;  /* Rounded border */
-  padding: 5px; /* Some padding */
-  width: 150px; /* Set a small width */
-}
 
-img.thumbnail:hover {
-  box-shadow: 0 0 20px 10px rgba(0, 140, 186, 0.5);
-  border-radius: 4px;
-}
+

src/App.tsx

@@ -3,37 +3,42 @@ import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
 import './App.css'
 import {PhotoViewer} from './photoViewer/PhotoViewer.tsx'
-import { ImageSelector, currentImage } from './photoViewer/ImageSelector.tsx'
+import { ImageSelector } from './photoViewer/ImageSelector.tsx'
 import { GetImageUrls } from './photoViewer/ImageSelector.tsx'
 
+//TOREAD : https://react.dev/learn/sharing-state-between-components
+//TOREAD : https://react.dev/learn/responding-to-events#passing-event-handlers-as-props
+
+
+
 
 
 function App() {
   const [count, setCount] = useState(0)
   const imagesID = [1, 24, 32, 36, 44, 47];
   const url = GetImageUrls(imagesID);
 
-
+  const [currentImage, setCurrentImage] = useState('https://picsum.photos/id/250/600/300.jpg')
+  function setCurrentImageFunction(url:string){
+    setCurrentImage(url)
+  }
   //console.log(url)
 
   return (
     <>
       <div className="card">
         <button onClick={() => setCount((count) => count + 1)}>
           count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
+        </button>  
       </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
 
       <h1>React Photo Viewer</h1>
       <PhotoViewer photoUrl={currentImage} />
-
-      <ImageSelector urlList={url}/>
+      <div className='imageSelector'>
+        <ImageSelector setCurrentImageFunction={setCurrentImageFunction} />
+      </div>
+      {/* <ImageSelector urlList={url}  /> */}
+
 
 
 

src/photoViewer/ImageSelector.css

@@ -1,3 +1,8 @@
+.thumbnailList{
+    display: flex;
+    flex-direction: row;
+  }
+
 .thumbnail{
     border: 1px solid #ddd; /* Gray border */
     border-radius: 4px;  /* Rounded border */

src/photoViewer/ImageSelector.tsx

@@ -1,20 +1,26 @@
 import React from "react";  // import React (to provide access to TSX)
-import { useState } from 'react'
 import './ImageSelector.css'
 
+const imageUrls = ['https://picsum.photos/id/1/600/300.jpg',
+                    'https://picsum.photos/id/24/600/300.jpg',
+                'https://picsum.photos/id/30/600/300.jpg',
+            'https://picsum.photos/id/56/600/300.jpg',
+        'https://picsum.photos/id/65/600/300.jpg']
 
-export const [currentImage, setCurrentImage] = useState('https://picsum.photos/id/250/600/300.jpg')
+interface ImageSelectorProps{
+    setCurrentImageFunction : (url:string)=>void;
+}
 
 
-
-export function ImageSelector({urlList}: {urlList: string[]}) {    
+//export function ImageSelector({urlList}: {urlList: string[]}, prop:ImageSelectorProps) {
+export function ImageSelector(prop:ImageSelectorProps) {    
 
     return (                
 
-        <div>
-            {urlList.map(imageUrl => { 
+        <div className="thumbnailList">
+            {imageUrls.map(imageUrl => { 
                 return          <div>
-                                <img className='thumbnail' onClick={() => setCurrentImage(imageUrl)} src={imageUrl} />
+                                <img className='thumbnail' onClick={() => prop.setCurrentImageFunction(imageUrl)} src={imageUrl} />
                                 </div> })}
         </div>
     );