Step 3: adding video items to the page

colbyfayock · Aug 6, 2020 · 5bc2d37 · 5bc2d37
1 parent 7ca0de9
commit 5bc2d37
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 37 deletions.
diff --git a/pages/index.js b/pages/index.js
@@ -14,7 +14,6 @@ export async function getServerSideProps() {
 }
 
 export default function Home({ data }) {
-  console.log('data', data);
   return (
     <div className={styles.container}>
       <Head>
@@ -24,43 +23,25 @@ export default function Home({ data }) {
 
       <main className={styles.main}>
         <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
+          My Talks
         </h1>
 
-        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.js</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h3>Documentation &rarr;</h3>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h3>Learn &rarr;</h3>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/master/examples"
-            className={styles.card}
-          >
-            <h3>Examples &rarr;</h3>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h3>Deploy &rarr;</h3>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
+        <ul className={styles.grid}>
+          {data.items.map(({ id, snippet = {} }) => {
+            const { title, thumbnails = {}, resourceId = {} } = snippet;
+            const { medium } = thumbnails;
+            return (
+              <li key={id} className={styles.card}>
+                <a href={`https://www.youtube.com/watch?v=${resourceId.videoId}`}>
+                  <p>
+                    <img width={medium.width} height={medium.height} src={medium.url} alt="" />
+                  </p>
+                  <h3>{ title }</h3>
+                </a>
+              </li>
+            )
+          })}
+        </ul>
       </main>
 
       <footer className={styles.footer}>

diff --git a/styles/Home.module.css b/styles/Home.module.css
@@ -73,14 +73,22 @@
 
 .grid {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
   flex-wrap: wrap;
 
+  list-style: none;
+  padding: 0;
+  margin-left: 0;
+
   max-width: 800px;
   margin-top: 3rem;
 }
 
+.grid img {
+  max-width: 100%;
+}
+
 .card {
   margin: 1rem;
   flex-basis: 45%;