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,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,8 +1,10 @@
 import React, { useState, useEffect } from "react";
 import "./PhotoGallery.scss";
+import { LargeImage } from "./LargeImage";
 
 export const PhotoGallery: React.FunctionComponent = () => {
   const [imageUrls, setImageUrls] = useState<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`;
@@ -17,12 +19,15 @@ 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 className="space-image" src={url} alt="" />)
+        )}
+      </div>
     </div>
   );
 };