Fixed file names and structure. Fixed module imports. Installed iconify.

components/calender/Calender.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
+import { endOfMonth, getDate } from "date-fns";
+import CalenderNav from "./CalenderNav";
+
+const Calender = (): JSX.Element => {
+  const today = new Date();
+
+  const endOfCurrMonth = endOfMonth(today);
+  const lastDay = getDate(endOfCurrMonth);
+
+  // console.info(`This month has ${lastDay} days.`);
+
+  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 (
+    <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>
+  );
+};
+
+export default Calender;

components/calender/CalenderNav.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";
+
+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;