Updated file names to use default index file.

2021-12-05 16:47:59 -06:00
parent 2ca6bab953
commit 00d6d8edb4
1 changed files with 21 additions and 3 deletions
--- a/components/calender/index.tsx
+++ b/components/calender/index.tsx
@@ -0,0 +1,94 @@
+import React, { useContext, useEffect } from "react";
+import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
+import CalenderNav from "./CalenderNav";
+import { CalenderContext } from "../../contexts/CalenderContext";
+
+interface UpdateCalendarProps {
+  year: number;
+  month: number;
+  day: number;
+}
+
+const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
+  const { daysOfMonth, daysOfWeek, setDate } = useContext(CalenderContext);
+
+  useEffect(() => {
+    if (newDate) {
+      const { year, month, day } = newDate;
+
+      if (year > 0 && month > 0 && day > 0) {
+        setDate(newDate);
+      } else {
+        console.warn("Invalid date format: ", newDate);
+      }
+    }
+  }, [daysOfMonth, daysOfWeek, newDate]);
+
+  // Simulated user settings context
+  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.startOfWeek[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;