makersclaw 0.2.0 → 0.3.0

package/registry/blocks/calendar-view/calendar.jsx

@@ -0,0 +1,627 @@
+"use client";
+
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Button, IconButton, Notice, Sheet, Skeleton, ToggleGroup, cx } from "../../ui";
+import {
+  DEFAULT_VIEW,
+  LIFTED,
+  TaskChip,
+  TaskDragProvider,
+  ViewToolbar,
+  addDays,
+  applyView,
+  createTaskContext,
+  dayOf,
+  deleteChange,
+  draftTask,
+  formatDay,
+  isDone,
+  minutesOf,
+  startOfMonth,
+  useTaskChanges,
+  withTime,
+} from "../task-model";
+import {
+  CALENDAR_MODES,
+  DAY_MINUTES,
+  MODE_LABELS,
+  UNSCHEDULE,
+  allDayPatch,
+  closedOn,
+  dayPatch,
+  durationOf,
+  eventsOf,
+  extendPatch,
+  minutesLabel,
+  moveEventPatch,
+  normalizeSlots,
+  placeEventPatch,
+  rangeFor,
+  resizeEventPatch,
+  snapMinutes,
+  stepAnchor,
+  timedPatch,
+  titleFor,
+  unscheduledOf,
+} from "./calendar-model";
+import { AgendaView } from "./agenda";
+import { MonthView } from "./month";
+import { TimeGrid } from "./time-grid";
+import { UnscheduledTray } from "./tray";
+import { isTyping } from "./paint";
+
+// CalendarView — tasks on a calendar: month, week, day and agenda. Drag an
+// item to another day or hour, drag its end to change how long it runs,
+// click (or drag across) an empty stretch to add one there, and drag
+// tasks without a date in from the unscheduled tray. A line marks now.
+// Search and filters come from task-model's ViewToolbar, so a task
+// filtered out of the list is filtered out here too.
+//
+// Everything saves through one async `onChange(change)` answering { ok }
+// (task-model's change shapes); the calendar shows each change at once
+// and takes it back, with a notice, when the save fails.
+//
+// The available-time layer (closed hours muted, open slots as boxes you
+// can pick) is what booking-page builds on: `availability`, `slots` or
+// `getSlots`, `renderSlot`, `onSlotClick`. README.md lists every prop.
+
+const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const clamp = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
+const UNIT = { month: "month", week: "week", day: "day", agenda: "stretch" };
+const quote = (t) => `“${t?.title || "Untitled"}”`;
+
+function useControlled(value, initial, onChange) {
+  const [own, setOwn] = useState(initial);
+  const controlled = value !== undefined;
+  const set = useCallback(
+    (next) => {
+      if (!controlled) setOwn(next);
+      onChange?.(next);
+    },
+    [controlled, onChange],
+  );
+  return [controlled ? value : own, set];
+}
+
+// The wall clock, a minute at a time — after mount only, so the server
+// and the first client render agree. A fixed `now` wins (a demo).
+function useNow(fixed) {
+  const [clock, setClock] = useState(null);
+  useEffect(() => {
+    if (fixed) return undefined;
+    const tick = () => {
+      const d = new Date();
+      setClock(withTime(dayOf(d), d.getHours() * 60 + d.getMinutes()));
+    };
+    tick();
+    const t = setInterval(tick, 60000);
+    return () => clearInterval(t);
+  }, [fixed]);
+  return fixed ?? clock;
+}
+
+export function CalendarView({
+  tasks,
+  statuses,
+  people,
+  projects,
+  fields,
+  today,
+  weekStartsOn,
+  weekend,
+  holidays,
+  now: nowProp,
+  locale,
+  onChange,
+  onOpen,
+  mode: modeProp,
+  defaultMode = "month",
+  onModeChange,
+  modes = CALENDAR_MODES,
+  date: dateProp,
+  defaultDate,
+  onDateChange,
+  view: viewProp,
+  defaultView,
+  onViewChange,
+  header = true,
+  toolbar = true,
+  toolbarExtra,
+  tray = true,
+  colorBy = "project",
+  availability,
+  slots,
+  getSlots,
+  renderSlot,
+  onSlotClick,
+  selectedSlot,
+  slotLabel = "Open",
+  hourHeight = 48,
+  height = "40rem",
+  snap = 15,
+  defaultDuration = 60,
+  agendaDays = 14,
+  addLabel = "Add task",
+  loading = false,
+  error: readError,
+  label = "Calendar",
+  className,
+}) {
+  const ctx = useMemo(
+    () => createTaskContext({ statuses, people, projects, fields, today, weekStartsOn, weekend, holidays }),
+    [statuses, people, projects, fields, today, weekStartsOn, weekend, holidays],
+  );
+  const editable = typeof onChange === "function";
+  const { tasks: all, commit, error, clearError } = useTaskChanges(tasks, onChange);
+  const now = useNow(nowProp);
+
+  const [modeRaw, setModeRaw] = useControlled(modeProp, defaultMode, onModeChange);
+  const mode = modes.includes(modeRaw) ? modeRaw : modes[0] ?? "month";
+  const [anchorRaw, setAnchor] = useControlled(dateProp, dayOf(defaultDate) ?? ctx.today, onDateChange);
+  const anchor = dayOf(anchorRaw) ?? ctx.today;
+  const [viewRaw, setView] = useControlled(viewProp, { ...DEFAULT_VIEW, groupBy: "none", ...defaultView }, onViewChange);
+  const view = useMemo(() => ({ ...DEFAULT_VIEW, groupBy: "none", ...viewRaw }), [viewRaw]);
+
+  // How wide we are, not the window: a calendar in a side panel is narrow.
+  const rootRef = useRef(null);
+  const [width, setWidth] = useState(null);
+  useIsoLayoutEffect(() => {
+    const el = rootRef.current;
+    if (!el) return undefined;
+    setWidth(el.getBoundingClientRect().width);
+    if (typeof ResizeObserver === "undefined") return undefined;
+    const ro = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const narrow = width !== null && width < 640;
+  const sidePanel = width === null || width >= 960;
+  const count = mode === "week" && narrow ? 3 : 7;
+
+  const range = useMemo(() => rangeFor(mode, anchor, { weekStartsOn: ctx.weekStartsOn, count, agendaDays }), [mode, anchor, ctx.weekStartsOn, count, agendaDays]);
+  const shown = useMemo(() => applyView(all, view, ctx).tasks, [all, view, ctx]);
+  const events = useMemo(() => eventsOf(shown, { defaultMinutes: defaultDuration }), [shown, defaultDuration]);
+  const unscheduled = useMemo(() => unscheduledOf(shown).filter((t) => !isDone(t, ctx)), [shown, ctx]);
+
+  const [announce, setAnnounce] = useState("");
+  const say = (text) => setAnnounce(text);
+  const [draft, setDraft] = useState(null); // { day, allDay } | { day, from, to }
+  const [selected, setSelected] = useState(null); // a phone's month: the tapped day
+  const [trayOpen, setTrayOpen] = useState(true);
+  const [traySheet, setTraySheet] = useState(false);
+  useEffect(() => setDraft(null), [mode, anchor]);
+
+  // ---- saving ----------------------------------------------------------
+
+  function update(task, patch, words) {
+    if (!patch) return Promise.resolve({ ok: false });
+    return commit({ type: "update", id: task.id, patch }, { label: quote(task) }).then((r) => {
+      if (r.ok !== false && words) say(words);
+      return r;
+    });
+  }
+
+  function remove(task) {
+    return commit(deleteChange(all, [task.id]), { label: quote(task), undo: `Deleted ${quote(task)}` });
+  }
+
+  function saveDraft(title) {
+    const d = draft;
+    setDraft(null);
+    if (!d || !editable) return undefined;
+    const patch = d.allDay ? { due: d.day } : { start: withTime(d.day, d.from), due: withTime(d.day, d.to) };
+    const task = draftTask(title, ctx, patch);
+    return commit({ type: "create", task }, { label: quote(task) }).then((r) => {
+      if (r.ok !== false) say(`Added ${quote(task)} on ${formatDay(d.day, ctx.today, { locale })}${d.allDay ? "" : `, ${minutesLabel(d.from, { locale })}`}`);
+      return r;
+    });
+  }
+
+  function extend(event, dir) {
+    const end = addDays(event.end, dir);
+    if (end < event.start) return;
+    update(event.task, extendPatch(event, end), `${quote(event.task)} now ends ${formatDay(end, ctx.today, { locale })}`);
+  }
+
+  // Arrow keys on a timed block: previewed at once, saved when the keys
+  // rest, so ten presses are one save.
+  const [nudge, setNudge] = useState(null);
+  const nudgeRef = useRef(null);
+  const nudgeTimer = useRef(null);
+  const focusRef = useRef(null);
+  useEffect(() => () => clearTimeout(nudgeTimer.current), []);
+
+  function flushNudge() {
+    clearTimeout(nudgeTimer.current);
+    const n = nudgeRef.current;
+    nudgeRef.current = null;
+    setNudge(null);
+    if (!n || (!n.dm && !n.dd && !n.dr)) return;
+    const e = n.event;
+    const len = Math.max(15, e.to - e.from + n.dr);
+    const from = clamp(e.from + n.dm, 0, DAY_MINUTES - len);
+    const day = addDays(e.start, n.dd);
+    update(e.task, placeEventPatch(e, day, from, from + len), `${quote(e.task)} is now ${formatDay(day, ctx.today, { locale })}, ${minutesLabel(from, { locale })} to ${minutesLabel(from + len, { locale })}`);
+  }
+
+  function nudgeBy(event, { dm = 0, dd = 0, dr = 0 }) {
+    if (nudgeRef.current && nudgeRef.current.id !== event.id) flushNudge();
+    focusRef.current = event.id;
+    const cur = nudgeRef.current ?? { id: event.id, event, dm: 0, dd: 0, dr: 0 };
+    const next = { ...cur, dm: cur.dm + dm, dd: cur.dd + dd, dr: cur.dr + dr };
+    nudgeRef.current = next;
+    setNudge(next);
+    clearTimeout(nudgeTimer.current);
+    nudgeTimer.current = setTimeout(flushNudge, 700);
+  }
+
+  const shownEvents = useMemo(() => {
+    if (!nudge) return events;
+    return events.map((e) => {
+      if (e.id !== nudge.id || !e.timed) return e;
+      const day = addDays(e.start, nudge.dd);
+      const len = Math.max(15, e.to - e.from + nudge.dr);
+      const from = clamp(e.from + nudge.dm, 0, DAY_MINUTES - len);
+      return { ...e, start: day, end: day, from, to: from + len, preview: true };
+    });
+  }, [events, nudge]);
+
+  // A block moved by keys to another column is a new element: keep focus.
+  useEffect(() => {
+    if (!focusRef.current || !rootRef.current) return;
+    const el = rootRef.current.querySelector(`[data-cal-id="${CSS.escape(focusRef.current)}"]`);
+    if (!el) return;
+    if (document.activeElement !== el) el.focus({ preventScroll: false });
+    if (!nudgeRef.current) focusRef.current = null;
+  });
+
+  // ---- navigation --------------------------------------------------------
+
+  function setMode(next) {
+    setModeRaw(next);
+    setDraft(null);
+  }
+
+  function go(dir) {
+    const next = stepAnchor(mode, anchor, dir, { count, agendaDays });
+    setAnchor(next);
+    if (mode === "month") setSelected(next.slice(0, 7) === ctx.today.slice(0, 7) ? ctx.today : startOfMonth(next));
+  }
+
+  function goToday() {
+    setAnchor(ctx.today);
+    setSelected(ctx.today);
+  }
+
+  function openDay(day) {
+    if (modes.includes("day")) {
+      setAnchor(day);
+      setModeRaw("day");
+    } else setAnchor(day);
+  }
+
+  function addNew() {
+    if (!editable) return;
+    const inView = mode === "month" ? ctx.today.slice(0, 7) === anchor.slice(0, 7) : range.days.includes(ctx.today);
+    const day = inView ? ctx.today : mode === "month" ? startOfMonth(anchor) : range.days[0];
+    if (mode === "week" || mode === "day") {
+      const nowMin = dayOf(now) === day ? minutesOf(now) : null;
+      const from = nowMin !== null ? Math.min(Math.ceil(nowMin / 60) * 60, DAY_MINUTES - defaultDuration) : 9 * 60;
+      setDraft({ day, from, to: from + defaultDuration });
+    } else {
+      setDraft({ day, allDay: true });
+      if (narrow) setSelected(day);
+    }
+  }
+
+  function onKeyDown(e) {
+    if (e.defaultPrevented || isTyping(e) || e.metaKey || e.ctrlKey || e.altKey) return;
+    if (e.target.closest?.("[popover], dialog")) return;
+    const k = e.key.toLowerCase();
+    const byKey = { m: "month", w: "week", d: "day", a: "agenda" };
+    if (k === "t") goToday();
+    else if (k === "j" || k === "n") go(1);
+    else if (k === "k" || k === "p") go(-1);
+    else if (k === "c" && editable) addNew();
+    else if (byKey[k] && modes.includes(byKey[k])) setMode(byKey[k]);
+    else return;
+    e.preventDefault();
+  }
+
+  // ---- dragging ------------------------------------------------------------
+
+  const ppm = hourHeight / 60;
+  const pointer = useRef(null); // where the last press started
+  const lastMove = useRef(null); // where the pointer is during a drag
+  const grab = useRef(null); // the day of a span that was grabbed
+  const [dragging, setDragging] = useState(false);
+  useEffect(() => {
+    if (!dragging) return undefined;
+    const move = (e) => {
+      lastMove.current = { x: e.clientX, y: e.clientY };
+    };
+    window.addEventListener("pointermove", move, { passive: true });
+    return () => window.removeEventListener("pointermove", move);
+  }, [dragging]);
+
+  function pointerMinute(over, delta) {
+    const p = lastMove.current ?? (pointer.current ? { y: pointer.current.y + delta.y } : null);
+    if (!p || typeof over.top !== "function") return 9 * 60;
+    return clamp(Math.floor((p.y - over.top()) / ppm / 15) * 15, 0, DAY_MINUTES - 15);
+  }
+
+  function onDragEnd({ active, over, delta }) {
+    setDragging(false);
+    const a = active?.data ?? {};
+    const o = over?.data ?? null;
+    const task = a.task;
+    const grabbed = grab.current;
+    grab.current = null;
+    if (!task) return;
+    const name = quote(task);
+    const on = (day) => formatDay(day, ctx.today, { locale });
+    if (a.kind === "resize-y") {
+      const dm = snapMinutes(delta.y / ppm, snap);
+      if (!dm) return;
+      const to = clamp(a.event.to + dm, a.event.from + 15, DAY_MINUTES);
+      update(task, resizeEventPatch(a.event, to), `${name} now ends at ${minutesLabel(to, { locale })}`);
+      return;
+    }
+    if (a.kind === "resize-x") {
+      const dd = Math.round(delta.x / a.cellWidth());
+      if (!dd) return;
+      const end = addDays(a.event.end, dd) < a.event.start ? a.event.start : addDays(a.event.end, dd);
+      update(task, extendPatch(a.event, end), `${name} now ends ${on(end)}`);
+      return;
+    }
+    if (o?.kind === "tray") {
+      if (a.kind !== "tray") update(task, UNSCHEDULE, `${name} has no date now`);
+      return;
+    }
+    if (a.kind === "timed") {
+      if (o?.kind === "cell") {
+        update(task, allDayPatch(o.day), `${name} is all day on ${on(o.day)}`);
+        return;
+      }
+      const days = range.days;
+      const k = clamp(Math.round(delta.x / a.colWidth()), -a.colIndex, days.length - 1 - a.colIndex);
+      const dm = snapMinutes(delta.y / ppm, snap);
+      if (!k && !dm) return;
+      const day = days[a.colIndex + k];
+      const from = clamp(a.event.from + dm, 0, DAY_MINUTES - (a.event.to - a.event.from));
+      update(task, moveEventPatch(a.event, day, from), `${name} is now ${on(day)}, ${minutesLabel(from, { locale })}`);
+      return;
+    }
+    if (!o) return;
+    if (o.kind === "column") {
+      const from = pointerMinute(o, delta);
+      const len = a.kind === "tray" ? durationOf(task, defaultDuration) : defaultDuration;
+      update(task, timedPatch(o.day, from, len), `${name} is now ${on(o.day)}, ${minutesLabel(from, { locale })}`);
+      return;
+    }
+    if (o.kind === "cell") {
+      const patch = a.kind === "tray" ? { due: o.day } : dayPatch(task, o.day, { grabbed });
+      if (patch) update(task, patch, `${name} is now on ${on(o.day)}`);
+    }
+  }
+
+  // ---- the available-time layer -------------------------------------------
+
+  const slotKey = `${range.from}:${range.to}`;
+  const [fetched, setFetched] = useState({ key: null, slots: [] });
+  const timeMode = mode === "week" || mode === "day";
+  useEffect(() => {
+    if (!getSlots || !timeMode) return undefined;
+    let alive = true;
+    Promise.resolve()
+      .then(() => getSlots({ from: range.from, to: range.to }))
+      .then(
+        (r) => alive && setFetched({ key: slotKey, slots: normalizeSlots(r) }),
+        () => alive && setFetched({ key: slotKey, slots: [] }),
+      );
+    return () => {
+      alive = false;
+    };
+    // range.from / range.to are in slotKey
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getSlots, slotKey, timeMode]);
+  const gridSlots = useMemo(() => [...normalizeSlots(slots), ...(fetched.key === slotKey ? fetched.slots : [])], [slots, fetched, slotKey]);
+  const closed = useMemo(() => (availability ? (day) => closedOn(day, availability) : null), [availability]);
+
+  const api = {
+    ctx,
+    editable,
+    locale,
+    colorBy,
+    addLabel,
+    snap,
+    defaultDuration,
+    open: onOpen ?? null,
+    openDay,
+    draft,
+    startDraft: (d) => editable && setDraft(d),
+    cancelDraft: () => setDraft(null),
+    saveDraft,
+    commit,
+    update,
+    remove,
+    extend,
+    nudge: nudgeBy,
+    setGrab: (day) => {
+      grab.current = day;
+    },
+  };
+
+  // ---- drawing -----------------------------------------------------------------
+
+  const title = titleFor(mode, range, anchor, { today: ctx.today, locale });
+  const trayShown = tray && (sidePanel ? trayOpen : traySheet);
+  const empty = editable && !loading && all.length === 0;
+
+  let body;
+  if (loading) body = <CalendarSkeleton />;
+  else if (mode === "month")
+    body = <MonthView weeks={range.weeks} month={anchor.slice(0, 7)} events={shownEvents} api={api} narrow={narrow} selected={selected} onSelect={setSelected} />;
+  else if (mode === "agenda") body = <AgendaView days={range.days} events={shownEvents} api={api} />;
+  else
+    body = (
+      <TimeGrid
+        days={range.days}
+        events={shownEvents}
+        api={api}
+        hourHeight={hourHeight}
+        height={height}
+        closed={closed}
+        slots={gridSlots}
+        renderSlot={renderSlot}
+        onSlotClick={onSlotClick}
+        selectedSlot={selectedSlot}
+        slotLabel={slotLabel}
+        now={now}
+      />
+    );
+
+  return (
+    <section
+      ref={rootRef}
+      aria-label={label}
+      className={cx("grid min-w-0 gap-3", className)}
+      onKeyDown={onKeyDown}
+      onPointerDownCapture={(e) => {
+        pointer.current = { x: e.clientX, y: e.clientY };
+        focusRef.current = null;
+      }}
+      onKeyDownCapture={(e) => {
+        if (e.key === " " || e.key === "Enter") {
+          pointer.current = null;
+          grab.current = null;
+        }
+      }}
+    >
+      {header ? (
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+          <h2 className="min-w-0 flex-1 truncate text-lg font-semibold tracking-tight" aria-live="polite">
+            {title}
+          </h2>
+          <div className="flex items-center gap-1">
+            <Button size="sm" variant="secondary" onClick={goToday} title="Today (T)">
+              Today
+            </Button>
+            <IconButton size="sm" icon="chevron-left" label={`Previous ${UNIT[mode]}`} onClick={() => go(-1)} />
+            <IconButton size="sm" icon="chevron-right" label={`Next ${UNIT[mode]}`} onClick={() => go(1)} />
+          </div>
+          {modes.length > 1 ? (
+            <ToggleGroup
+              size="sm"
+              aria-label="Calendar view"
+              value={mode}
+              onChange={setMode}
+              items={modes.map((m) => ({ value: m, label: MODE_LABELS[m] ?? m }))}
+              className={narrow ? "w-full" : undefined}
+            />
+          ) : null}
+        </div>
+      ) : null}
+      {toolbar ? (
+        <ViewToolbar
+          view={view}
+          onViewChange={setView}
+          ctx={ctx}
+          tasks={all}
+          controls={["search", "filter"]}
+          count={shown.length}
+          extra={
+            <>
+              {tray ? (
+                <Button
+                  size="sm"
+                  variant={trayShown ? "secondary" : "quiet"}
+                  icon="inbox"
+                  aria-pressed={sidePanel ? trayOpen : undefined}
+                  onClick={() => (sidePanel ? setTrayOpen((v) => !v) : setTraySheet(true))}
+                >
+                  {unscheduled.length ? `Unscheduled · ${unscheduled.length}` : "Unscheduled"}
+                </Button>
+              ) : null}
+              {editable ? (
+                <Button size="sm" variant="primary" icon="plus" onClick={addNew} title={`${addLabel} (C)`}>
+                  {addLabel}
+                </Button>
+              ) : null}
+              {toolbarExtra}
+            </>
+          }
+        />
+      ) : null}
+      {readError ? <Notice tone="danger">{readError}</Notice> : null}
+      {error ? (
+        <Notice tone="danger" onDismiss={clearError}>
+          {error}
+        </Notice>
+      ) : null}
+      {empty ? (
+        <p className="text-sm text-muted-foreground">
+          {timeMode ? "Nothing on the calendar yet. Click an hour, or drag across a few, to add a task." : "Nothing on the calendar yet. Click any day to add a task there."}
+        </p>
+      ) : null}
+      <TaskDragProvider
+        disabled={!editable}
+        onDragStart={() => {
+          lastMove.current = null;
+          setDragging(true);
+        }}
+        onDragOver={({ over }) => {
+          if (grab.current == null && over?.data?.kind === "cell") grab.current = over.data.day;
+        }}
+        onDragEnd={onDragEnd}
+        onDragCancel={() => {
+          setDragging(false);
+          grab.current = null;
+        }}
+        overlay={(a) =>
+          a.data.kind === "span" || a.data.kind === "tray" ? (
+            <div className={cx(LIFTED, "w-52 max-w-[70vw]")}>
+              <TaskChip task={a.data.task} ctx={ctx} />
+            </div>
+          ) : null
+        }
+      >
+        <div className="flex min-w-0 items-start gap-4">
+          <div className="min-w-0 flex-1">{body}</div>
+          {tray && sidePanel && trayOpen ? <UnscheduledTray tasks={unscheduled} api={api} className="sticky top-4 max-h-[40rem] w-60 shrink-0 overflow-y-auto" /> : null}
+        </div>
+      </TaskDragProvider>
+      {tray && !sidePanel ? (
+        <Sheet open={traySheet} onClose={() => setTraySheet(false)} title="Unscheduled" description="Tasks without a date yet. Give each one a day.">
+          <UnscheduledTray tasks={unscheduled} api={api} mode="sheet" />
+        </Sheet>
+      ) : null}
+      <p aria-live="polite" className="sr-only">
+        {announce}
+      </p>
+    </section>
+  );
+}
+
+function CalendarSkeleton() {
+  return (
+    <div className="overflow-hidden rounded-lg border border-border bg-card" aria-busy="true" aria-label="Loading the calendar">
+      <div className="grid grid-cols-7 gap-px border-b border-border p-2">
+        {Array.from({ length: 7 }, (_, i) => (
+          <Skeleton key={i} className="h-3 w-10" />
+        ))}
+      </div>
+      {Array.from({ length: 5 }, (_, w) => (
+        <div key={w} className="grid grid-cols-7 border-b border-border last:border-b-0">
+          {Array.from({ length: 7 }, (_, d) => (
+            <div key={d} className="grid min-h-28 content-start gap-1.5 border-e border-border p-2 last:border-e-0">
+              <Skeleton className="h-3 w-4" />
+              {(w + d) % 3 === 0 ? <Skeleton className="h-4 w-full" /> : null}
+              {(w * d) % 4 === 1 ? <Skeleton className="h-4 w-2/3" /> : null}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}