Exercise 4

site/gatsby-config.js

@@ -2,9 +2,12 @@
 module.exports = {
   siteMetadata: {
     title: `SketchXConf 2020`,
-    description: `description`,
-    author: `@you`,
-    siteUrl: `https://monica.dev/gatsbyworkshop`,
+    description: `A conference site mockup made from a Gatsby Workshop`,
+    author: `Richard Pastenes`,
+    social: {
+      twitter: `@richardpastenes`,
+    },
+    siteUrl: `https://gatsby-workshop-richard.netlify.app/`,
   },
   plugins: [
     `gatsby-plugin-react-helmet`,
@@ -17,7 +20,7 @@ module.exports = {
         background_color: `#ffffff`,
         theme_color: `#000`,
         display: `minimal-ui`,
-        icon: `src/images/pencil-icon.png`,
+        icon: `src/images/favicon.png`,
       },
     },
     `gatsby-plugin-postcss`,

site/package.json

@@ -17,6 +17,7 @@
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-helmet": "5.2.1",
+    "react-icons": "^3.11.0",
     "typeface-inter": "^3.12.0"
   },
   "husky": {

site/src/components/footer.js

@@ -1,7 +1,23 @@
 import React from "react";
-import { Link } from "gatsby";
+import { useStaticQuery, graphql, Link } from "gatsby";
+import { FaTwitter } from "react-icons/fa";
 
 export default function footer() {
+  const data = useStaticQuery(graphql`
+    query FooterQuery {
+      site {
+        siteMetadata {
+          author
+          siteUrl
+          social {
+            twitter
+          }
+          title
+          description
+        }
+      }
+    }
+  `);
   return (
     <div>
       <div className="bg-white ">
@@ -11,13 +27,14 @@ export default function footer() {
               to="/"
               className="no-underline text-gray-700 hover:text-gray-500"
             >
-              &copy; SketchXConf 2020
+              &copy; {data.site.siteMetadata.title} &bull;{" "}
+              {data.site.siteMetadata.description}
             </Link>
           </p>
 
           <p>
             <a
-              href="https://monica.dev/gatsbyworkshop"
+              href={data.site.siteMetadata.url}
               className="text-gray-700 hover:text-gray-500 no-underline "
               target="_blank"
               rel="noopener noreferrer"
@@ -31,6 +48,17 @@ export default function footer() {
                 />
               </svg>
             </a>
+            <p>
+              <a
+                href={`https://twitter.com/${data.site.siteMetadata.social.twitter}`}
+                className="text-gray-700 hover:text-gray-500 no-underline "
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <span className="sr-only">Twitter</span>
+                <FaTwitter />
+              </a>
+            </p>
           </p>
         </nav>
       </div>

site/src/components/header.js

@@ -5,7 +5,10 @@ import Logo from "../images/pencil-icon.png";
 
 function Header({ siteTitle }) {
   const [isExpanded, toggleExpansion] = useState(false);
-  const NavLinks = [{ href: "/", name: "Home" }];
+  const NavLinks = [
+    { href: "/", name: "Home" },
+    { href: "/tickets", name: "Tickets" },
+  ];
 
   return (
     <nav className="bg-white">

site/src/pages/tickets.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { useStaticQuery, graphql } from "gatsby";
+
+import Layout from "../components/layout";
+import SEO from "../components/seo";
+
+const Ticket = ({ title }) => (
+  <div className="text-center ">
+    <h1 className="text-5xl font-extrabold text-blue-500 leading-9 tracking-tight">
+      Grab Your Ticket To {title}
+    </h1>
+    <br />
+    <div className="flex flex-col">
+      <div className="bg-gray-300 rounded-lg m-2 p-2 h-30 align-middle hover:bg-purple-200 ">
+        <h2>Full Pass</h2>
+        <p className="text-3xl">$20</p>
+      </div>
+      <div className="bg-gray-300 rounded-lg m-2 p-2 h-30 align-middle hover:bg-purple-200 ">
+        <div>
+          <h2>VIP Pass</h2>
+          <p className="text-3xl">$45</p>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+function TicketsPage() {
+  const data = useStaticQuery(graphql`
+    query titcketsLandingQuery {
+      site {
+        siteMetadata {
+          title
+        }
+      }
+    }
+  `);
+
+  return (
+    <Layout>
+      <SEO title="Tickets" keywords={[`Tickets`]} />
+      <Ticket title={data.site.siteMetadata.title} />
+    </Layout>
+  );
+}
+
+export default TicketsPage;