using a simplegrid created a resebalence of a calender.

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;