Mm 49 large image

src/components/photoGallery/LargeImage.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+interface LargeImageProps{
+  url: string;
+  title: string;
+}
+
+export const LargeImage: React.FunctionComponent<LargeImageProps> = ({ url, title}) => {
+  return (
+    <div>
+      <img className="large-picture" src={url} alt={title} 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,10 @@
 .space-image {
     width: 200px;
     height: 200px;
-    object-fit: cover; 
+    object-fit: cover;
+}
+
+.large-picture {
+    width: 90%;
+    padding: 5%;
 }

src/components/photoGallery/PhotoGallery.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from "react";
 import "./PhotoGallery.scss";
+import { LargeImage } from "./LargeImage";
 
-interface Apod {
+export interface Apod {
   date: string;
   explanation: string;
   hdurl: string;
@@ -11,28 +12,40 @@ interface Apod {
   url: string;
 }
 
+const firstLargeImage: Apod = {date:"2013-07-13",
+                        explanation:"Reddened rays of the setting Sun flooded the skies over Cedar Creek Lake",
+                        hdurl:"https://apod.nasa.gov/apod/image/1307/Sunspot-06July2013-johunter.jpg",
+                        media_type:"image",
+                        service_version:"v1",
+                        title:"Sunspot at Sunset",
+                        url:"https://apod.nasa.gov/apod/image/1307/Sunspot-06July2013-johunter950.jpg"}
+
 export const PhotoGallery: React.FunctionComponent = () => {
-  const [imageUrls, setImageUrls] = useState<string[]>();
+  const [imageData, setImageData] = useState<Apod[]>();
+  const [largeImage, setLargeImage] = useState<Apod>(firstLargeImage);
 
   useEffect(() => {
     const url = `https://api.nasa.gov/planetary/apod?count=50&api_key=DEMO_KEY`;
-
     const fetchData = async () => {
-      const response = await fetch(url);
-      const json: Apod[] = await response.json();
-      setImageUrls(json.map((item) => item.url));
+    const response = await fetch(url);
+    const json: Apod[] = await response.json();
+    setImageData(json)
     };
 
     fetchData();
   }, []);
 
   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 url={largeImage.url} title={largeImage.title} />
+      <div className="image-gallery">
+        {
+          imageData === undefined
+            ? <p>Loading....</p>
+            : imageData.map(image => <img
+              onClick={() => { setLargeImage(image); window.scrollTo(0, 0) }}
+              className="space-image" src={image.url} alt={image.title} />)}
+      </div>
     </div>
   );
 };