@veracity/vui/dist/calendar/components/timeUnitHeader.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { cs } from "../../utils/styles.js";
import { Box } from "../../box/box.js";
import { Button } from "../../button/button.js";
import { months } from "../consts.js";
import { isDay, isMonth, isYear } from "../utils.js";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";

//#region src/calendar/components/timeUnitHeader.tsx
const h = 40;
const fontSize = 16;
/**
* Displays the header title with the month and year being viewed
*/
const TimeUnitHeader = ({ onSetTimeUnitMode, timeUnitMode, viewMonth }) => {
	return /* @__PURE__ */ jsxs(Box, {
		center: true,
		className: cs("vui-time-unit-header"),
		cursor: "pointer",
		flex: "1",
		justifyItems: "flex-start",
		gap: "2px",
		children: [
			isDay(timeUnitMode) && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
				fontSize,
				h,
				onClick: () => onSetTimeUnitMode("month"),
				variant: "tertiary",
				px: "6px",
				minW: "auto",
				children: months[viewMonth.getUTCMonth()]
			}), /* @__PURE__ */ jsx(Button, {
				fontSize,
				h,
				onClick: () => onSetTimeUnitMode("year"),
				variant: "tertiary",
				px: "6px",
				minW: "auto",
				children: viewMonth.getUTCFullYear()
			})] }),
			isMonth(timeUnitMode) && /* @__PURE__ */ jsx(Button, {
				fontSize,
				h,
				onClick: () => onSetTimeUnitMode("year"),
				variant: "tertiary",
				px: "6px",
				minW: "auto",
				children: viewMonth.getUTCFullYear()
			}),
			isYear(timeUnitMode) && /* @__PURE__ */ jsx(Button, {
				fontSize,
				h,
				onClick: () => onSetTimeUnitMode("day"),
				variant: "tertiary",
				px: "6px",
				minW: "auto",
				children: "Year"
			})
		]
	});
};

//#endregion
export { TimeUnitHeader };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=timeUnitHeader.js.map