@mankindui/core
Version:
- a react component library - you can see how @mankindui/core can be used via examples: [usage examples](https://github.com/clarklindev/mankindui-test)
41 lines (40 loc) • 2.73 kB
JavaScript
import { j as t } from "../../_virtual/jsx-runtime.js";
import { useState as v } from "react";
import { HiChevronLeft as M, HiChevronRight as N } from "../../node_modules/react-icons/hi2/index.js";
import "../index.js";
import { Button as y } from "../Button/index.js";
import { Icon as u } from "../Icon/index.js";
const D = (r, n) => new Date(r, n + 1, 0).getDate(), C = (r, n, a) => (new Date(r, n, 1).getDay() - a + 7) % 7, R = ({ startDayOfWeek: r = 0, onSelect: n }) => {
const [a, l] = v(/* @__PURE__ */ new Date()), o = a.getFullYear(), i = a.getMonth(), m = D(o, i), c = C(o, i, r), j = D(o, i - 1), x = Array.from({ length: c }, (e, s) => j - c + s + 1), d = Array.from({ length: m }, (e, s) => s + 1), w = Array.from({ length: 42 - (x.length + d.length) }, (e, s) => s + 1), b = [...x, ...d, ...w], g = (e) => {
l(new Date(o, i + e, 1));
}, h = ["S", "M", "T", "W", "T", "F", "S"];
return r === 1 && h.push(h.shift()), /* @__PURE__ */ t.jsxs("div", { className: "p-2 bg-white dark:bg-black dark:bg-opacity-5 shadow-md rounded-lg max-w-[200px] sm:max-w-[240px]", children: [
/* @__PURE__ */ t.jsxs("div", { className: "flex justify-between items-center mb-1", children: [
/* @__PURE__ */ t.jsx(y, { intent: "icon", onClick: () => g(-1), children: /* @__PURE__ */ t.jsx(u, { size: "S", className: "text-black dark:text-white", children: /* @__PURE__ */ t.jsx(M, {}) }) }),
/* @__PURE__ */ t.jsxs("h2", { className: "text-xs sm:text-sm font-semibold light:text-black dark:text-white", children: [
a.toLocaleString("default", { month: "short" }),
" ",
o
] }),
/* @__PURE__ */ t.jsx(y, { intent: "icon", onClick: () => g(1), children: /* @__PURE__ */ t.jsx(u, { size: "S", className: "text-black dark:text-white", children: /* @__PURE__ */ t.jsx(N, {}) }) })
] }),
/* @__PURE__ */ t.jsx("div", { className: "grid grid-cols-7 text-center text-[10px] sm:text-xs font-semibold text-gray-600 ", children: h.map((e) => /* @__PURE__ */ t.jsx("div", { className: "py-0.5", children: e }, e)) }),
/* @__PURE__ */ t.jsx("div", { className: "grid grid-cols-7 gap-0.5 mt-1", children: b.map((e, s) => {
const f = s < c, p = s >= c + m, k = new Date(o, i, e);
return /* @__PURE__ */ t.jsx(
"div",
{
className: `flex justify-center items-center h-6 w-6 sm:h-8 sm:w-8 rounded-md cursor-pointer transition text-[10px] sm:text-xs hover:bg-blue-200
${f || p ? "text-gray-400" : "text-black dark:text-white"} `,
onClick: () => !f && !p && (n == null ? void 0 : n(k)),
children: e
},
s
);
}) })
] });
};
export {
R as Calendar
};
//# sourceMappingURL=index.js.map