From 11c10d87e5cd0af9faa7c93df2d4a6e5ddf26c2a Mon Sep 17 00:00:00 2001
From: Lucid Kobold <lucid@lucidcreations.media>
Date: Sun, 14 Nov 2021 15:19:46 -0600
Subject: [PATCH] using a simplegrid created a resebalence of a calender.

---
 component/calender/index.tsx | 32 ++++++++++++++++++++++++++++++++
 pages/index.tsx              | 13 +++++++++----
 2 files changed, 41 insertions(+), 4 deletions(-)
 create mode 100644 component/calender/index.tsx

diff --git a/component/calender/index.tsx b/component/calender/index.tsx
new file mode 100644
index 0000000..a1d8126
--- /dev/null
+++ b/component/calender/index.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { Box, SimpleGrid } from "@chakra-ui/react";
+
+const Calender = (): JSX.Element => {
+  const daysArr = [];
+  for (let i = daysArr.length; i < 31; i++) {
+    daysArr.push(daysArr.length + 1);
+  }
+  return (
+    <SimpleGrid
+      px={10}
+      spacing="5px"
+      bg="brand.main"
+      w="100%"
+      h="100vh"
+      columns={7}
+    >
+      {daysArr.map((day) => {
+        return (
+          <Box
+            bg="brand.primary"
+            w="100%"
+            h="100%"
+            key={day}
+          >{`Day ${day}`}</Box>
+        );
+      })}
+    </SimpleGrid>
+  );
+};
+
+export default Calender;
diff --git a/pages/index.tsx b/pages/index.tsx
index 00421cd..37f34cd 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,12 +1,17 @@
 import React from "react";
 import { Box, Heading } from "@chakra-ui/react";
+import Calender from "../component/calender";
 
 const IndexPage = (): JSX.Element => {
   return (
-    <Box textAlign="center" w="100%" h="auto" py="10vh">
-      <Heading as="h1" size="2xl">
-        Hello World
-      </Heading>
+    <Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">
+      {Calender ? (
+        <Calender />
+      ) : (
+        <Heading as="h1" size="2xl">
+          Hello World
+        </Heading>
+      )}
     </Box>
   );
 };