Mm 49 large image

src/components/photoGallery/LargeImage.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+interface Props {
+  largeImageUrl: string
+}
+
+export const LargeImage: React.FunctionComponent<Props> = ({ largeImageUrl }) => {
+  return (
+    <div>
+      <img className="large-picture" src={largeImageUrl} alt="lorem picsum" width="90%" />
+    </div>
+  );
+}

src/components/photoGallery/PhotoGallery.scss

@@ -1,14 +1,22 @@
-.imageGallery {
+.image-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.image-gallery {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     justify-content: space-around;
     gap: 10px;
 }
 
-.spaceImage {
-    width: 200px;
-    height: 200px;
+.space-image {
+    width: 150px;
+    height: 150px;
     object-fit: cover;
-
-}
+}
+
+.large-picture {
+    padding: 5%;
+}

src/components/photoGallery/PhotoGallery.tsx

@@ -1,31 +1,34 @@
 import React, { useState, useEffect } from "react";
-import "./PhotoGallery.scss"
+import "./PhotoGallery.scss";
+import { LargeImage } from "./LargeImage";
 
 export const PhotoGallery: React.FunctionComponent = () => {
-
   const [imageUrls, setImageUrls] = useState<string[]>();
-  const img_urls: string[] = [];
+  const [largeImageUrl, setLargeImageUrl] = useState<string>("https://apod.nasa.gov/apod/image/0201/earthrise_apollo8.jpg");
+
+  useEffect(() => {
+    const url = `https://api.nasa.gov/planetary/apod?count=50&api_key=DEMO_KEY`;
+
+    const fetchData = async () => {
 
-        useEffect(() => {
-          const url = `https://api.nasa.gov/planetary/apod?count=50&api_key=DEMO_KEY`;
-
-          const fetchData = async () => {
-            try {
-              const response = await fetch(url);
-              const json = await response.json();
-              json.forEach((item: {url: string}) => img_urls.push(item.url));  
-              setImageUrls(img_urls);
-            } catch (error) {
-              console.log("error", error);
-            }
-          };
-
-          fetchData();
-      }, []);
+      const response = await fetch(url);
+      const json = await response.json();
+      setImageUrls(json.map(item => item.url));
+    };
+    fetchData();
+  }, []);
 
   return (
-      <div className = "imageGallery">
-      {imageUrls?.map(url => <img className="spaceImage" src={url} alt = ""/>)}
-          </div>
+    <div className="image-container">
+      <LargeImage largeImageUrl={largeImageUrl} />
+      <div className="image-gallery">
+        {
+          imageUrls === undefined
+            ? <p>Loading....</p>
+            : imageUrls.map(url => <img
+              onClick={() => { setLargeImageUrl(url); window.scrollTo(0, 0) }}
+              className="space-image" src={url} alt="" />)}
+      </div>
+    </div>
   );
 };