From 2c983ad475612d09efb8b2c8bc29058b7867064a Mon Sep 17 00:00:00 2001
From: Kyle Gill <kylerobertgill@gmail.com>
Date: Fri, 29 Mar 2019 00:13:16 -0600
Subject: [PATCH] feat: card day grid

---
 src/components/screens/Day/Day.js     |  1 +
 src/components/screens/Month/Month.js | 52 +++++++++++++++++++++++----
 2 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/src/components/screens/Day/Day.js b/src/components/screens/Day/Day.js
index c1de956..a13f1c7 100644
--- a/src/components/screens/Day/Day.js
+++ b/src/components/screens/Day/Day.js
@@ -18,6 +18,7 @@ const JournalHeading = styled.h2`
   margin-top: ${SIZES.medium};
 `;
 const JournalEntryArea = styled.textarea`
+  font-family: sans-serif;
   flex-grow: 0.8;
   color: ${props => props.theme.colors.primary};
   caret-color: ${props => props.theme.colors.secondary};
diff --git a/src/components/screens/Month/Month.js b/src/components/screens/Month/Month.js
index 34bdb5f..73ccbe2 100644
--- a/src/components/screens/Month/Month.js
+++ b/src/components/screens/Month/Month.js
@@ -1,8 +1,38 @@
 import React, { Component } from "react";
-import { subDays, format, isToday } from "date-fns";
+import styled from "@emotion/styled";
+import {
+  isAfter,
+  format,
+  addMonths,
+  subMonths,
+  getDaysInMonth,
+  startOfMonth
+} from "date-fns";
 
 import Seek from "../../Seek";
 
+const YearCardGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+  grid-gap: 20px;
+  margin-top: 20px;
+`;
+const YearCard = styled.div`
+  color: ${props =>
+    props.disabled
+      ? props.theme.colors.quarternary
+      : props.theme.colors.secondary};
+  border: 1px solid;
+  border-color: ${props => props.theme.colors.quarternary};
+  padding: 30px;
+  border-radius: 5px;
+  text-align: center;
+  user-select: none;
+  &:hover {
+    border-color: ${props => !props.disabled && props.theme.colors.tertiary};
+  }
+`;
+
 class Month extends Component {
   render() {
     const {
@@ -11,15 +41,25 @@ class Month extends Component {
       }
     } = this.props;
     const currentDay = new Date(year, month - 1);
+
+    let yearCards = [];
+    for (let i = 0; i < getDaysInMonth(currentDay); i++) {
+      yearCards.push(<YearCard key={i}>{i + 1}</YearCard>);
+    }
+
     return (
-      <div>
+      <>
         <Seek
           title={format(currentDay, "YYYY MMM")}
-          prev={format(subDays(currentDay, 1), "/YYYY/MM")}
-          next={"asdf"}
-          disableNext={isToday(new Date())}
+          prev={format(subMonths(currentDay, 1), "/YYYY/MM")}
+          next={format(addMonths(currentDay, 1), "/YYYY/MM")}
+          disableNext={isAfter(
+            currentDay,
+            startOfMonth(subMonths(new Date(), 1))
+          )}
         />
-      </div>
+        <YearCardGrid>{yearCards}</YearCardGrid>
+      </>
     );
   }
 }