#34 Add details section and Date component

src/components/Works/Work/Work.js

@@ -5,8 +5,8 @@ import { navigateTo } from 'gatsby-link';
 
 import Icon from '../../common/Icon';
 import ArrowButton from '../../common/ArrowButton';
+import Date from '../../common/Date';
 
-import colors from '../../../assets/colors';
 import styles from './Work.module.css';
 
 class Work extends React.Component {
@@ -69,10 +69,7 @@ class Work extends React.Component {
         )}
 
         <h4>{data.header}</h4>
-        <div className={styles.date}>
-          <Icon icon="calendar" color={colors.text40} spin={false} />
-          <span className={styles.dateText}>{data.frontmatter.date}</span>
-        </div>
+        <Date date={data.frontmatter.date} />
         <p>{data.excerpt}</p>
         <ArrowButton
           action={() => navigateTo(route)}

src/components/Works/Work/Work.module.css

@@ -84,16 +84,3 @@
     }
   }
 }
-
-.date {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  color: color(var(--text) tint(40%));
-
-  & .dateText {
-    font-size: 1.75rem;
-    font-weight: 600;
-    margin-left: 1rem;
-  }
-}

src/components/common/Date/Date.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Icon from '../Icon';
+
+import colors from '../../../assets/colors';
+import styles from './Date.module.css';
+
+const Date = ({ date }) => (
+  <div className={styles.date}>
+    <Icon icon="calendar" color={colors.text40} spin={false} />
+    <span className={styles.dateText}>{date}</span>
+  </div>
+);
+
+Date.propTypes = {
+  date: PropTypes.string.isRequired,
+};
+
+export default Date;

src/components/common/Date/Date.module.css

@@ -0,0 +1,14 @@
+@import "../../../assets/styles/config.css";
+
+.date {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: color(var(--text) tint(40%));
+
+  & .dateText {
+    font-size: 1.75rem;
+    font-weight: 600;
+    margin-left: 1rem;
+  }
+}

src/components/common/Date/index.js

@@ -0,0 +1 @@
+export { default } from './Date';

src/templates/WorkSingle.js

@@ -1,9 +1,13 @@
 /* eslint-disable react/no-danger */
 import React, { Component } from 'react';
 import Img from 'gatsby-image';
+import { navigateTo } from 'gatsby-link';
+
 
 import Navbar from '../components/Navbar';
 import Footer from '../components/Footer';
+import Date from '../components/common/Date';
+import ArrowButton from '../components/common/ArrowButton';
 
 import styles from './WorkSingle.module.css';
 
@@ -34,6 +38,17 @@ export default class WorkSingle extends Component {
             ))}
           </div>
           <h1>{data.markdownRemark.frontmatter.title}</h1>
+          <div className={styles.details}>
+            <span className={styles.author}>
+              {data.markdownRemark.frontmatter.author}
+            </span>
+            <Date date={data.markdownRemark.frontmatter.date} />
+            <ArrowButton
+              action={() => navigateTo('/')}
+              text="GO BACK"
+              direction="l"
+            />
+          </div>
         </div>
         <div 
           className={`section-wrapper ${styles.postBody}`}
@@ -53,7 +68,8 @@ export const query = graphql`
       html
       frontmatter {
         title
-        date(formatString: "MMMM DD YYYY")
+        author
+        date(formatString: "MMM YY")
         tags {
           tag
         }

src/templates/WorkSingle.module.css

@@ -24,10 +24,25 @@
     text-transform: none;
     border-bottom: none;
     padding-bottom: 0;
-    margin-top: 2rem;
+    margin-top: 3rem;
+    margin-bottom: 2rem;
+  }
+
+  & .details {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-gap: 2rem 3rem;
+
+    & .author {
+      font-weight: 600;
+      color: var(--blue);
+      font-size: 2.5rem;
+    }
   }
 
   & .postBody {
+    margin-top: 5rem;
+
     & h1 {
       font-size: 2rem;
       color: color(var(--text) tint(20%));

static/admin/config.yml

@@ -17,6 +17,7 @@ collections:
     fields:
       - {label: "Relative Path", name: "relpath", widget: "hidden", default: "../../.."}
       - {label: Title, name: title, widget: string}
+      - {label: Author, name: author, widget: string}
       - {label: Publish Date, name: date, widget: datetime}
       - {label: Hero image, name: heroImage, widget: image}
       - {label: Thumbnail, name: thumbnail, widget: image}