Exercise 7 - Display Speaker Data

site/src/components/header.js

@@ -8,6 +8,7 @@ function Header({ siteTitle }) {
   const NavLinks = [
     { href: "/", name: "Home" },
     { href: "/tickets", name: "Tickets" },
+    { href: "/#schedule", name: "Schedule" },
   ];
 
   return (

site/src/pages/index.js

@@ -1,10 +1,12 @@
+import { useStaticQuery } from "gatsby";
 import React from "react";
 
 import Layout from "../components/layout";
+import TalkCard from "../components/talkCard";
 import SEO from "../components/seo";
 import sketchnoting from "../images/taking-notes.svg";
 
-const Hero = () => (
+const Hero = ({ talks }) => (
   <div className="text-center">
     <h1 className="text-5xl font-extrabold text-blue-500 leading-9 tracking-tight font-inter">
       October 7th, 2020
@@ -27,22 +29,42 @@ const Hero = () => (
       </div>
     </div>
     <br />
-    <h2 className="text-5xl font-extrabold text-blue-500 leading-9 tracking-tight font-inter">
+    <h2
+      className="text-5xl font-extrabold text-blue-500 leading-9 tracking-tight font-inter p-4"
+      id="schedule"
+    >
       Schedule
     </h2>
-    Placeholder Text!
+    {talks.map((talk) => {
+      return <TalkCard talk={talk.node} key={talk.node.name} />;
+    })}
   </div>
 );
 
 function IndexPage() {
+  const data = useStaticQuery(graphql`
+    query FetchSpeakers {
+      allSpeakersYaml {
+        edges {
+          node {
+            id
+            avatar
+            name
+            title
+            time
+          }
+        }
+      }
+    }
+  `);
+
   return (
     <Layout>
       <SEO
         title="Home"
         keywords={[`gatsby`, `tailwind`, `react`, `tailwindcss`]}
       />
-
-      <Hero />
+      <Hero talks={data.allSpeakersYaml.edges} />
     </Layout>
   );
 }