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;

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">
+    <Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">
+      {Calender ? (
+        <Calender />
+      ) : (
         <Heading as="h1" size="2xl">
           Hello World
         </Heading>
+      )}
     </Box>
   );
 };