From 95b9f91ef7c5f10cb8096af15834bfc73e8d1f95 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <lucid@lucidcreations.media>
Date: Sat, 1 Jan 2022 22:06:48 -0600
Subject: [PATCH] Started a day component. Will dynamically render buttons and
 onClicks depending on the properties of the given date. This will in turn
 trigger the appropriate modal when necessary.

---
 components/calender/Day.tsx               | 59 +++++++++++++++++++++++
 components/calender/modals/AddSticker.tsx |  5 +-
 2 files changed, 61 insertions(+), 3 deletions(-)
 create mode 100644 components/calender/Day.tsx

diff --git a/components/calender/Day.tsx b/components/calender/Day.tsx
new file mode 100644
index 0000000..a7088a9
--- /dev/null
+++ b/components/calender/Day.tsx
@@ -0,0 +1,59 @@
+import { Box, Text } from "@chakra-ui/react";
+import { add, getYear, getMonth, sub, getDate } from "date-fns";
+import router from "next/router";
+import React, { Fragment } from "react";
+import AddSticker from "./modals/AddSticker";
+
+const Day = (
+  isOverflow: boolean,
+  date: Date,
+  overflowDirection: "next" | "prev" | null,
+  selectedDate: Date
+) => {
+  return (
+    <Fragment>
+      {isOverflow && (
+        <Box
+          bg="transparent"
+          color={isOverflow ? "gray.600" : "whiteAlpha"}
+          border={isOverflow ? "2px solid #181d8f" : "2px solid #0068ff"}
+          w="100%"
+          h="100%"
+          key={date}
+          {...(isOverflow && {
+            _hover: {
+              cursor: "pointer"
+            }
+          })}
+          {...(isOverflow && {
+            onClick: () => {
+              if (overflowDirection === "next") {
+                console.log(overflowDirection);
+                const newMonth = add(selectedDate, { months: 1 });
+
+                const year = getYear(newMonth);
+                const month = getMonth(newMonth) + 1;
+
+                router.push(`/calendar/${year}/${month}`);
+              } else if (overflowDirection === "prev") {
+                const newMonth = sub(selectedDate, { months: 1 });
+
+                const year = getYear(newMonth);
+                const month = getMonth(newMonth) + 1;
+
+                router.push(`/calendar/${year}/${month}`);
+              }
+            }
+          })}
+        >
+          <Text w="100%" h="100%">
+            {!isOverflow && <AddSticker />}
+            {`Day ${getDate(date)}`}
+          </Text>
+        </Box>
+      )}
+    </Fragment>
+  );
+};
+
+export default Day;
diff --git a/components/calender/modals/AddSticker.tsx b/components/calender/modals/AddSticker.tsx
index cbe85c2..10ead41 100644
--- a/components/calender/modals/AddSticker.tsx
+++ b/components/calender/modals/AddSticker.tsx
@@ -6,7 +6,7 @@ import {
   ModalHeader,
   ModalCloseButton,
   ModalBody,
-  ModalFooter,
+  ModalFooter
   // Lorem
 } from "@chakra-ui/react";
 import React, { Fragment, useState } from "react";
@@ -23,8 +23,7 @@ const AddSticker = (): JSX.Element => {
         <ModalContent>
           <ModalHeader>Modal Title</ModalHeader>
           <ModalCloseButton />
-          <ModalBody>
-          </ModalBody>
+          <ModalBody></ModalBody>
 
           <ModalFooter>
             <Button