Merge pull request #14 from newrelic/guid-page

feat: Guide listing component

.nvmrc

@@ -0,0 +1 @@
+10

src/components/GuideListing.js

@@ -0,0 +1,32 @@
+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.arrayOf(
+    PropTypes.shape({
+      minutes: PropTypes.number.isRequired,
+      title: PropTypes.string.isRequired,
+      description: PropTypes.string.isRequired,
+      path: PropTypes.string.isRequired,
+    })
+  ).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

@@ -0,0 +1,27 @@
+import './GuideTile.scss';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import { navigate } from 'gatsby';
+
+const GuideTile = ({ minutes, title, description, path }) => (
+  <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.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  path: PropTypes.string.isRequired,
+};
+
+export default GuideTile;

src/components/GuideTile.scss

@@ -0,0 +1,29 @@
+.GuideTile {
+  display: grid;
+  grid-template-areas:
+    '. . time'
+    'main main main';
+
+  background-color: var(--color-tile-background);
+  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/Header.js

@@ -1,10 +1,11 @@
-import { Link, useStaticQuery, graphql } from 'gatsby';
-import React from 'react';
-import PropTypes from 'prop-types';
+import './Header.scss';
+
+import { Link, graphql, useStaticQuery } from 'gatsby';
 
 import Container from './Container';
 import ExternalLink from './ExternalLink';
-import './Header.scss';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 const Header = ({ pages }) => {
   // NOTE: we may want to abstract this
@@ -96,7 +97,7 @@ Header.propTypes = {
 Header.defaultProps = {
   pages: [
     { displayName: 'Collect Data', path: '' },
-    { displayName: 'Explore Data', path: '' },
+    { displayName: 'Explore Data', path: 'explore-data' },
     { displayName: 'Build Apps', path: '' },
     { displayName: 'Automate New Relic', path: '' },
     { displayName: 'Reference Docs', path: '' },

src/components/styles.scss

@@ -5,6 +5,7 @@
 :root {
   --color-black: #000;
   --color-white: #fff;
+  --color-tile-background: rgb(215, 210, 233);
 }
 
 /*-- Reset --*/

src/pages/explore-data.js

@@ -0,0 +1,38 @@
+import GuideListing from '../components/GuideListing';
+import Layout from '../components/Layout';
+import { Link } from 'gatsby';
+import React from 'react';
+import SEO from '../components/Seo';
+
+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
+what you need, when you need it. New Relic One provides modern APIs to
+give you full control over how data is queried.`;
+
+const guides = [
+  {
+    minutes: 15,
+    title: 'GraphQL API',
+    description:
+      'Learn how to fetch precisely the data your application needs. No more, no less.',
+    path: 'guides/graphql-api',
+  },
+  {
+    minutes: 5,
+    title: 'REST API',
+    description:
+      'Get data out to New Relic using the gold standard in API technology.',
+    path: 'guides/rest-api',
+  },
+];
+
+const ExploreDataPage = () => (
+  <Layout>
+    <SEO title={heading} />
+    <GuideListing heading={heading} description={description} guides={guides} />
+    <Link to="/">Go back to the homepage</Link>
+  </Layout>
+);
+
+export default ExploreDataPage;