38 lines
1023 B
TypeScript
38 lines
1023 B
TypeScript
import React, { useContext } from "react";
|
|
import { Heading, HStack, IconButton } from "@chakra-ui/react";
|
|
import { Icon } from "@iconify/react";
|
|
import { format } from "date-fns";
|
|
import { CalenderContext } from "../../contexts/CalenderContext";
|
|
|
|
const CalenderNav = (): JSX.Element => {
|
|
const { selectedMonth, prevMonth, nextMonth } = useContext(CalenderContext);
|
|
|
|
const currentMonth = format(selectedMonth, "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" />}
|
|
onClick={() => prevMonth()}
|
|
/>
|
|
<Heading
|
|
w="100%"
|
|
h="auto"
|
|
_hover={{
|
|
cursor: "default",
|
|
}}
|
|
>
|
|
{currentMonth}
|
|
</Heading>
|
|
<IconButton
|
|
aria-label="Next Month"
|
|
icon={<Icon icon="akar-icons:chevron-right" />}
|
|
onClick={() => nextMonth()}
|
|
/>
|
|
</HStack>
|
|
);
|
|
};
|
|
|
|
export default CalenderNav;
|