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

components/calender/CalenderNav.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Heading, HStack, IconButton } from "@chakra-ui/react";
+import { Icon } from "@iconify/react";
+import { format } from "date-fns";
+
+const CalenderNav = (): JSX.Element => {
+  const today = new Date();
+
+  const currentMonth = format(today, "LLLL uuuu");
+
+  return (
+    <HStack spacing={10} as="nav" w="auto" h="10vh" textAlign="center">
+      <IconButton
+        aria-label="Previous Month"
+        icon={<Icon icon="akar-icons:chevron-left" />}
+      />
+      <Heading w="100%" h="auto">
+        {currentMonth}
+      </Heading>
+      <IconButton
+        aria-label="Next Month"
+        icon={<Icon icon="akar-icons:chevron-right" />}
+      />
+    </HStack>
+  );
+};
+
+export default CalenderNav;