feat: style guide listing component

src/components/GuideListing.js

@@ -0,0 +1,25 @@
+import './GuideListing.scss';
+
+import GuideTile from './GuideTile';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const GuideListing = ({ heading, description, guides }) => (
+  <div className="GuideListing">
+    <h1 className="GuideListing-heading">{heading}</h1>
+    <p className="GuideListing-description">{description}</p>
+    <div className="GuideListing-list">
+      {guides.map((guide, index) => (
+        <GuideTile key={index} {...guide} />
+      ))}
+    </div>
+  </div>
+);
+
+GuideListing.propTypes = {
+  heading: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  guides: PropTypes.object.isRequired,
+};
+
+export default GuideListing;

src/components/GuideListing.scss

@@ -0,0 +1,22 @@
+.GuideListing {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 2.5rem;
+}
+
+.GuideListing-heading,
+.GuideListing-description {
+  max-width: 800px;
+  text-align: center;
+  margin-bottom: 1.5rem;
+}
+
+.GuideListing-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(264px, 1fr));
+  grid-gap: 1rem;
+  grid-auto-rows: minmax(248px, auto);
+  margin-top: 1rem;
+  width: 100%;
+}

src/components/GuideTile.js

@@ -1,21 +1,24 @@
+import './GuideTile.scss';
+
 import PropTypes from 'prop-types';
 import React from 'react';
-
-// TODO clock icon
-// TODO semantic element for root element here?
-// TODO use path
+import { navigate } from 'gatsby';
 
 const GuideTile = ({ minutes, title, description, path }) => (
-  <div>
-    {Number.isInteger(minutes) && <div>{`${minutes} minutes`}</div>}
-    <h2>{title}</h2>
-    <p>{description}</p>
-    <button type="button">Start the Guide</button>
+  <div className="GuideTile">
+    <div className="GuideTile-timeEstimate">{`${minutes} minutes`}</div>
+    <div className="GuideTile-main">
+      <h2>{title}</h2>
+      <p className="GuideTile-description">{description}</p>
+      <button type="button" onClick={() => navigate(path)}>
+        Start the Guide
+      </button>
+    </div>
   </div>
 );
 
 GuideTile.propTypes = {
-  minutes: PropTypes.number,
+  minutes: PropTypes.number.isRequired,
   title: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
   path: PropTypes.string.isRequired,

src/components/GuideTile.scss

@@ -0,0 +1,30 @@
+.GuideTile {
+  display: grid;
+  grid-template-areas:
+    '. . time'
+    'main main main';
+
+  background-color: var(--tile-bg-color);
+  padding: 1rem;
+}
+
+.GuideTile-timeEstimate {
+  grid-area: time;
+  text-align: right;
+}
+
+.GuideTile-main {
+  grid-area: main;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+
+  margin-bottom: 1rem;
+}
+
+.GuideTile-description {
+  margin-bottom: 1.5rem;
+  max-width: calc(100% - 4rem);
+}

src/components/styles.scss

@@ -5,6 +5,9 @@
 :root {
   --color-black: #000;
   --color-white: #fff;
+  --tile-bg-color: rgb(215, 210, 233);
+  --body-max-width: 960px;
+  --guide-listing-columns: 2;
 }
 
 /*-- Reset --*/

src/pages/explore-data.js

@@ -1,10 +1,9 @@
-import GuidePage from '../components/GuidePage';
+import GuideListing from '../components/GuideListing';
 import Layout from '../components/Layout';
 import { Link } from 'gatsby';
 import React from 'react';
 import SEO from '../components/Seo';
 
-// TODO: Pull this data from a different file
 const heading = 'Explore Data in New Relic';
 
 const description = `Once New Relic has your data, the next step is to query that data to get
@@ -31,7 +30,7 @@ const guides = [
 const ExploreDataPage = () => (
   <Layout>
     <SEO title={heading} />
-    <GuidePage heading={heading} description={description} guides={guides} />
+    <GuideListing heading={heading} description={description} guides={guides} />
     <Link to="/">Go back to the homepage</Link>
   </Layout>
 );