Exercise 11 - Add Speakers Page

site/src/components/header.js

@@ -9,6 +9,7 @@ function Header({ siteTitle }) {
     { href: "/", name: "Home" },
     { href: "/tickets", name: "Tickets" },
     { href: "/#schedule", name: "Schedule" },
+    { href: "/speakers", name: "Speakers" },
   ];
 
   return (

site/src/components/speakerCards.js

@@ -5,8 +5,7 @@ export default function speakerCard({ speakers }) {
   return (
     <div className="flex items-center flex-wrap ">
       {speakers.map(({ node }) => (
-        // TODO: pass slug from node into the Link component
-        <Link to="" className="w-1/3 p-2" key={node.name}>
+        <Link to={`/${node.fields.slug}`} className="w-1/3 p-2">
           <div>
             <img
               className="rounded-full inline"

site/src/pages/speakers.js

@@ -0,0 +1,49 @@
+import { useStaticQuery } from "gatsby";
+import React from "react";
+
+import Layout from "../components/layout";
+import SpeakerCard from "../components/speakerCards";
+import SEO from "../components/seo";
+import sketchnoting from "../images/taking-notes.svg";
+
+const Hero = ({ speakers }) => (
+  <div className="text-center">
+    <h2 className="text-5xl font-extrabold text-blue-500 leading-9 tracking-tight font-inter p-4">
+      Speakers
+    </h2>
+    <SpeakerCard speakers={speakers} />;
+  </div>
+);
+
+function SpeakerPage() {
+  const data = useStaticQuery(graphql`
+    query FetchSpeakerData {
+      allSpeakersYaml {
+        edges {
+          node {
+            id
+            avatar
+            name
+            title
+            time
+            fields {
+              slug
+            }
+          }
+        }
+      }
+    }
+  `);
+
+  return (
+    <Layout>
+      <SEO
+        title="Home"
+        keywords={[`gatsby`, `tailwind`, `react`, `tailwindcss`]}
+      />
+      <Hero speakers={data.allSpeakersYaml.edges} />
+    </Layout>
+  );
+}
+
+export default SpeakerPage;