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

components/calender/Calender.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
 import { endOfMonth, getDate } from "date-fns";
-import CalenderNav from "./nav";
+import CalenderNav from "./CalenderNav";
 
 const Calender = (): JSX.Element => {
   const today = new Date();

components/calender/CalenderNav.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Heading, HStack, IconButton } from "@chakra-ui/react";
 import { Icon } from "@iconify/react";
-import { format } from "date-fns/esm";
+import { format } from "date-fns";
 
 const CalenderNav = (): JSX.Element => {
   const today = new Date();

package.json

@@ -19,7 +19,6 @@
     "@chakra-ui/react": "^1.7.2",
     "@emotion/react": "^11.6.0",
     "@emotion/styled": "^11.6.0",
-    "@iconify/react": "^3.1.0",
     "@types/react": "^17.0.37",
     "date-fns": "^2.26.0",
     "framer-motion": "^5.3.3",
@@ -29,6 +28,7 @@
     "sharp": "^0.29.3"
   },
   "devDependencies": {
+    "@iconify/react": "^3.1.0",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "eslint": "<8.0.0",
     "eslint-config-next": "12.0.3",

pages/index.tsx

@@ -1,17 +1,11 @@
 import React from "react";
-import { Box, Heading } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
-import Calender from "../component/calender";
+import Calender from "../components/calender/Calender";
 
 const IndexPage = (): JSX.Element => {
   return (
     <Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">
-      {Calender ? (
+      <Calender />
-        <Calender />
-      ) : (
-        <Heading as="h1" size="2xl">
-          Hello World
-        </Heading>
-      )}
     </Box>
   );
 };