epic complete

AJ-1009 · Jan 19, 2023 · ed4de6c · ed4de6c · vercel · Jan 19, 2023
1 parent 53d153f
commit ed4de6c
Show file tree

Hide file tree

Showing 5 changed files with 348 additions and 34 deletions.
diff --git a/components/ImageOfDay.js b/components/ImageOfDay.js
@@ -1,4 +1,4 @@
-import Head from "next/head";
+
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import styles from "./image-of-day.module.css";
@@ -40,9 +40,7 @@ export default function ImageOfDay({ title, link, desc, author, date }) {
   }, []);
   return (
     <>
-      <Head>
-        <title>NASA&#039;s Astronomy Picture of the Day</title>
-      </Head>
+
       <div className={styles["heading"]}>
         NASA&#039;s Astronomy Picture of the Day
       </div>

diff --git a/components/epic.module.css b/components/epic.module.css
@@ -53,6 +53,27 @@
   font-size: 20px;
   text-decoration: none;
 }
+.photos-wrapper{
+  display: flex;
+  gap: 20px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  margin-top: 50px;
+}
+.photos-wrapper div{
+  cursor: pointer;
+  border-radius: 7px;
+  width: 200px;
+  height: 200px;
+  flex-shrink: 0;
+}
+
+.photos-wrapper div img{
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
 @media (max-width: 972px) {
   .main-wrapper {
     flex-direction: column;
@@ -75,4 +96,8 @@
     width: 200px;
     height: 200px;
   }
+  .photos-wrapper div{
+    width: 100px;
+    height: 100px;
+  }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/pages/apod.js b/pages/apod.js
@@ -1,22 +1,32 @@
-import { useState,useEffect } from "react";
+import { useState, useEffect } from "react";
 import ImageOfDay from "../components/ImageOfDay";
-
+import Head from "next/head";
 export default function Apod() {
-    const [details,setdetails] = useState()
+  const [details, setdetails] = useState();
   useEffect(() => {
     fetch(
-      `https://api.nasa.gov/planetary/apod?api_key=${process.env.NEXT_PUBLIC_API_KEY
-}`
+      `https://api.nasa.gov/planetary/apod?api_key=${process.env.NEXT_PUBLIC_API_KEY}`
     )
       .then((res) => res.json())
       .then((res) => {
-        setdetails(res)
+        setdetails(res);
       });
   }, []);
   return (
     <div>
+      <Head>
+        <title>NASA&#039;s Astronomy Picture of the Day</title>
+      </Head>
       <div>
-        {details && <ImageOfDay author={details.copyright} link={details.url} title={details.title} desc={details.explanation} date={details.date} />}
+        {details && (
+          <ImageOfDay
+            author={details.copyright}
+            link={details.url}
+            title={details.title}
+            desc={details.explanation}
+            date={details.date}
+          />
+        )}
       </div>
     </div>
   );