trying to put part of the code in ImageSelector.tsx

src/App.css

@@ -48,8 +48,7 @@
   width: 150px; /* Set a small width */
 }
 
-thumbnail:hover {
+img.thumbnail:hover {
   box-shadow: 0 0 20px 10px rgba(0, 140, 186, 0.5);
-  border: #000000;
   border-radius: 4px;
 }

src/App.tsx

@@ -3,15 +3,16 @@ import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
 import './App.css'
 import {PhotoViewer} from './photoViewer/PhotoViewer.tsx'
-import { ImageSelector } from './photoViewer/ImageSelector.tsx'
+import { ImageSelector, currentImage } from './photoViewer/ImageSelector.tsx'
 import { GetImageUrls } from './photoViewer/ImageSelector.tsx'
 
+
+
 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')
 
   //console.log(url)
 
@@ -33,16 +34,8 @@ function App() {
       <PhotoViewer photoUrl={currentImage} />
 
       <ImageSelector urlList={url}/>
+
 
-      {/* <button onClick={() => setCurrentImage((currentImage) => Math.min(currentImage + 1,url.length))}></button> */}
-
-      <div>
-        {url.map(imageUrl => { 
-          return  <div>
-                    {imageUrl}
-                    <img className='thumbnail' onClick={() => setCurrentImage(imageUrl)} src={imageUrl} alt="image" />
-                  </div> })}
-      </div>
 
     </>
   )

src/photoViewer/ImageSelector.css

@@ -0,0 +1,11 @@
+.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/photoViewer/ImageSelector.tsx

@@ -1,10 +1,21 @@
 import React from "react";  // import React (to provide access to TSX)
+import { useState } from 'react'
+import './ImageSelector.css'
 
 
-export function ImageSelector(props) {    // declare and export new function called 'PhotoViewer'
+export const [currentImage, setCurrentImage] = useState('https://picsum.photos/id/250/600/300.jpg')
+
+
+
+export function ImageSelector({urlList}: {urlList: string[]}) {    
+
     return (                
-        <div>               
-            Hello World ! in ImageSelector
+
+        <div>
+            {urlList.map(imageUrl => { 
+                return          <div>
+                                <img className='thumbnail' onClick={() => setCurrentImage(imageUrl)} src={imageUrl} />
+                                </div> })}
         </div>
     );
 }