From 3f244d0f96dfe8273f7793dc8d639fcdde21383e Mon Sep 17 00:00:00 2001
From: Lucid Kobold <lucid@lucidcreations.media>
Date: Thu, 25 Nov 2021 18:03:08 -0600
Subject: [PATCH 1/2] Added non-functional navbar to the calender component.
 Added days of the week to the calender component.

---
 component/calender/index.tsx | 113 +++++++++++++++++++++++++++--------
 component/calender/nav.tsx   |  28 +++++++++
 2 files changed, 117 insertions(+), 24 deletions(-)
 create mode 100644 component/calender/nav.tsx

diff --git a/component/calender/index.tsx b/component/calender/index.tsx
index bb84b43..0d0c973 100644
--- a/component/calender/index.tsx
+++ b/component/calender/index.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import { Box, SimpleGrid } from "@chakra-ui/react";
+import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
 import { endOfMonth, getDate } from "date-fns";
+import CalenderNav from "./nav";
 
 const Calender = (): JSX.Element => {
   const today = new Date();
@@ -10,31 +11,95 @@ const Calender = (): JSX.Element => {
 
   // console.info(`This month has ${lastDay} days.`);
 
-  const daysArr = [];
-  for (let i = daysArr.length; i < lastDay; i++) {
-    daysArr.push(daysArr.length + 1);
+  const daysOfMonth = [];
+  for (let i = daysOfMonth.length; i < lastDay; i++) {
+    daysOfMonth.push(daysOfMonth.length + 1);
   }
+
+  const daysOfWeek = {
+    Sunday: [
+      "Sunday",
+      "Monday",
+      "Tuesday",
+      "Wednesday",
+      "Thursday",
+      "Friday",
+      "Saturday",
+    ],
+    Monday: [
+      "Monday",
+      "Tuesday",
+      "Wednesday",
+      "Thursday",
+      "Friday",
+      "Saturday",
+      "Sunday",
+    ],
+  };
+
+  const userSettings = {
+    theme: "default",
+    startOfWeek: "Sunday",
+  };
+
   return (
-    <SimpleGrid
-      px={6}
-      spacing={2}
-      // bg="brand.main"
-      w="100%"
-      h="100vh"
-      columns={7}
-    >
-      {daysArr.map((day) => {
-        return (
-          <Box
-            bg="transparent"
-            border="2px solid #0068ff"
-            w="100%"
-            h="100%"
-            key={day}
-          >{`Day ${day}`}</Box>
-        );
-      })}
-    </SimpleGrid>
+    <VStack h="100vh" w="100%">
+      <CalenderNav />
+      <HStack
+        px={6}
+        spacing={2}
+        // bg="brand.main"
+        w="100%"
+        h="auto"
+        alignContent="center"
+        alignItems="center"
+      >
+        {daysOfWeek[userSettings.startOfWeek].map((weekDay) => {
+          return (
+            <Box
+              d="flex"
+              alignContent="center"
+              alignItems="center"
+              bg="transparent"
+              border="2px solid #0068ff"
+              w="100%"
+              h={10}
+              key={weekDay}
+            >
+              <Text w="100%" h="auto">
+                {weekDay}
+              </Text>
+            </Box>
+          );
+        })}
+      </HStack>
+      <SimpleGrid
+        px={6}
+        spacing={2}
+        // bg="brand.main"
+        w="100%"
+        h="100%"
+        columns={7}
+        // alignContent="center"
+        alignItems="center"
+      >
+        {daysOfMonth.map((monthDay) => {
+          return (
+            <Box
+              bg="transparent"
+              border="2px solid #0068ff"
+              w="100%"
+              h="100%"
+              key={monthDay}
+            >
+              <Text w="100%" h="100%">
+                {`Day ${monthDay}`}
+              </Text>
+            </Box>
+          );
+        })}
+      </SimpleGrid>
+    </VStack>
   );
 };
 
diff --git a/component/calender/nav.tsx b/component/calender/nav.tsx
new file mode 100644
index 0000000..b62504a
--- /dev/null
+++ b/component/calender/nav.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { Heading, HStack, IconButton } from "@chakra-ui/react";
+import { Icon } from "@iconify/react";
+import { format } from "date-fns/esm";
+
+const CalenderNav = (): JSX.Element => {
+  const today = new Date();
+
+  const currentMonth = format(today, "LLLL uuuu");
+
+  return (
+    <HStack spacing={10} as="nav" w="auto" h="10vh" textAlign="center">
+      <IconButton
+        aria-label="Previous Month"
+        icon={<Icon icon="akar-icons:chevron-left" />}
+      />
+      <Heading w="100%" h="auto">
+        {currentMonth}
+      </Heading>
+      <IconButton
+        aria-label="Next Month"
+        icon={<Icon icon="akar-icons:chevron-right" />}
+      />
+    </HStack>
+  );
+};
+
+export default CalenderNav;
-- 
2.49.1


From b2fc727debd11ce16bff07dc9f61274efb21f5b1 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <lucid@lucidcreations.media>
Date: Thu, 25 Nov 2021 18:36:38 -0600
Subject: [PATCH 2/2] Fixed file names and structure. Fixed module imports.
 Installed iconify.

---
 .../index.tsx => components/calender/Calender.tsx    |  2 +-
 .../nav.tsx => components/calender/CalenderNav.tsx   |  2 +-
 package.json                                         |  2 +-
 pages/index.tsx                                      | 12 +++---------
 4 files changed, 6 insertions(+), 12 deletions(-)
 rename component/calender/index.tsx => components/calender/Calender.tsx (98%)
 rename component/calender/nav.tsx => components/calender/CalenderNav.tsx (94%)

diff --git a/component/calender/index.tsx b/components/calender/Calender.tsx
similarity index 98%
rename from component/calender/index.tsx
rename to components/calender/Calender.tsx
index 0d0c973..f6f6a76 100644
--- a/component/calender/index.tsx
+++ b/components/calender/Calender.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
 import { endOfMonth, getDate } from "date-fns";
-import CalenderNav from "./nav";
+import CalenderNav from "./CalenderNav";
 
 const Calender = (): JSX.Element => {
   const today = new Date();
diff --git a/component/calender/nav.tsx b/components/calender/CalenderNav.tsx
similarity index 94%
rename from component/calender/nav.tsx
rename to components/calender/CalenderNav.tsx
index b62504a..5e6903d 100644
--- a/component/calender/nav.tsx
+++ b/components/calender/CalenderNav.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Heading, HStack, IconButton } from "@chakra-ui/react";
 import { Icon } from "@iconify/react";
-import { format } from "date-fns/esm";
+import { format } from "date-fns";
 
 const CalenderNav = (): JSX.Element => {
   const today = new Date();
diff --git a/package.json b/package.json
index 0385b53..6ae99b8 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,6 @@
     "@chakra-ui/react": "^1.7.2",
     "@emotion/react": "^11.6.0",
     "@emotion/styled": "^11.6.0",
-    "@iconify/react": "^3.1.0",
     "@types/react": "^17.0.37",
     "date-fns": "^2.26.0",
     "framer-motion": "^5.3.3",
@@ -29,6 +28,7 @@
     "sharp": "^0.29.3"
   },
   "devDependencies": {
+    "@iconify/react": "^3.1.0",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "eslint": "<8.0.0",
     "eslint-config-next": "12.0.3",
diff --git a/pages/index.tsx b/pages/index.tsx
index 37f34cd..8a1bedd 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,17 +1,11 @@
 import React from "react";
-import { Box, Heading } from "@chakra-ui/react";
-import Calender from "../component/calender";
+import { Box } from "@chakra-ui/react";
+import Calender from "../components/calender/Calender";
 
 const IndexPage = (): JSX.Element => {
   return (
     <Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">
-      {Calender ? (
-        <Calender />
-      ) : (
-        <Heading as="h1" size="2xl">
-          Hello World
-        </Heading>
-      )}
+      <Calender />
     </Box>
   );
 };
-- 
2.49.1