This repository has been archived on 2025-08-14. You can view files and clone it, but cannot push or open issues or pull requests.
Files
lcm-potty-chart/component/calender/nav.tsx

29 lines
733 B
TypeScript

import React from "react";
import { Heading, HStack, IconButton } from "@chakra-ui/react";
import { Icon } from "@iconify/react";
import { format } from "date-fns/esm";
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;