UNPKG

@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
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