feat: added teh ability to specify icons to GuideTile

src/components/GuideTile.js

@@ -1,11 +1,18 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import FeatherIcon from './FeatherIcon';
 import cx from 'classnames';
 import { navigate } from 'gatsby';
 import styles from './GuideTile.module.scss';
 
-const GuideTile = ({ minutes, title, description, path, className }) => (
+const GuideTile = ({ icon, minutes, title, description, path, className }) => (
   <div className={cx(styles.tile, className)}>
+    {icon && (
+      <div className={styles.iconContainer}>
+        <FeatherIcon name={icon} size="2.5rem" />
+      </div>
+    )}
+
     <div className={styles.timeEstimate}>{minutes} minutes</div>
     <div className={styles.main}>
       <h2>{title}</h2>
@@ -23,6 +30,7 @@ GuideTile.propTypes = {
   description: PropTypes.string.isRequired,
   path: PropTypes.string.isRequired,
   className: PropTypes.string,
+  icon: PropTypes.string,
 };
 
 export default GuideTile;

src/components/GuideTile.module.scss

@@ -8,6 +8,7 @@
   padding: 0.5rem;
   border: 1px solid var(--color-neutrals-300);
   border-radius: 0.25rem;
+  position: relative;
 
   button:hover {
     transform: translateY(-1px);
@@ -28,6 +29,21 @@
   background-position: left center;
 }
 
+.iconContainer {
+  position: absolute;
+  top: -2.75rem;
+  left: 50%;
+  margin-left: -2.75rem;
+  width: 5.5rem;
+  height: 5.5rem;
+  border: 4px solid var(--color-white);
+  background-color: var(--color-neutrals-200);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .main {
   grid-area: main;
   display: flex;