Mm 49 large image

src/components/photoGallery/LargeImage.tsx

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

src/components/photoGallery/PhotoGallery.scss

@@ -1,3 +1,8 @@
+.image-container {
+    display: flex;
+    flex-direction: column;
+}
+
 .image-gallery {
     display: flex;
     flex-wrap: wrap;
@@ -9,5 +14,9 @@
 .space-image {
     width: 200px;
     height: 200px;
-    object-fit: cover; 
+    object-fit: cover;
+}
+
+.large-picture {
+    padding: 5%;
 }

src/components/photoGallery/PhotoGallery.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import "./PhotoGallery.scss";
+import { LargeImage } from "./LargeImage";
 
 interface Apod {
   date: string;
@@ -13,6 +14,7 @@ interface Apod {
 
 export const PhotoGallery: React.FunctionComponent = () => {
   const [imageUrls, setImageUrls] = useState<string[]>();
+  const [largeImageUrl, setLargeImageUrl] = useState("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`;
@@ -27,12 +29,16 @@ export const PhotoGallery: React.FunctionComponent = () => {
   }, []);
 
   return (
-    <div className="image-gallery">
-      {imageUrls === undefined ? (
-        <p>Loading....</p>
-      ) : (
-        imageUrls.map((url) => <img className="space-image" src={url} alt="" />)
-      )}
+    <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>
   );
 };