makersclaw 0.1.0 → 0.3.0

package/templates/next/files/components/ui/toast.jsx

@@ -0,0 +1,440 @@
+"use client";
+
+import { isValidElement, useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { createRoot } from "react-dom/client";
+import { cx } from "./cx";
+import { Button, IconButton } from "./button";
+import { Icon } from "./icon";
+import { Spinner } from "./feedback";
+
+// Toast — a short line about something that just happened ("Saved",
+// "Invite sent"), which leaves on its own. Call it from any client code;
+// nothing needs mounting: the first toast mounts a host into the page's
+// top layer (a manual popover, above sheets and menus). app/layout.jsx is
+// fixed, so this is how an app gets toasts at all. Put <Toaster /> in a
+// surface only to choose where they stack.
+//
+//   toast("Saved")                                   → id
+//   toast.success / .error / .info / .warning(title, options)
+//   toast.promise(promise, { loading, success, error })
+//             success / error: a string, (value) → string, or
+//             { title, description, action }; null dismisses. Returns the
+//             promise.
+//   toast.dismiss(id)                                one; no id = all
+//
+//   options   description   the line under the title
+//             action        { label, onClick } — one button; the toast
+//                           closes after unless onClick calls
+//                           event.preventDefault()
+//             duration      ms, default 5000; Infinity stays until closed
+//             id            reuse one to update a toast in place
+//
+//   <Toaster position visible />
+//             position  bottom-end (the default) · bottom-center ·
+//                       top-end · top-center. On a phone every position
+//                       is full width at its edge.
+//             visible   how many show at once (3); older ones wait behind
+//
+// Newest in front; the rest stack behind and fan out on hover or focus,
+// and every timer pauses while they do (and while the tab is hidden).
+// Close with the ×, Escape, or a sideways swipe. Screen readers hear each
+// toast once through a live region (assertive for .error). A toast is
+// never the only record of something that matters: an error the user
+// must act on is a Notice on the surface.
+
+const DURATION = 5000;
+const EXIT_MS = 200;
+const GAP = 12;
+const PEEK = 12;
+const SWIPE = 80;
+
+const TONES = {
+  neutral: { box: "border-border", icon: null },
+  success: { box: "border-success/40", icon: "check", color: "text-success" },
+  info: { box: "border-info/40", icon: "info", color: "text-info" },
+  warning: { box: "border-warning/50", icon: "warning", color: "text-warning" },
+  danger: { box: "border-destructive/50", icon: "warning", color: "text-destructive" },
+  loading: { box: "border-border", icon: null },
+};
+
+// Position → where the host sits. Class strings are written out whole:
+// Tailwind reads them literally.
+const PLACES = {
+  "bottom-end": "top-auto bottom-0 left-0 right-0 pb-[max(0.75rem,env(safe-area-inset-bottom))] sm:left-auto sm:right-0",
+  "bottom-center": "top-auto bottom-0 left-0 right-0 pb-[max(0.75rem,env(safe-area-inset-bottom))] sm:mx-auto",
+  "top-end": "top-0 bottom-auto left-0 right-0 sm:left-auto sm:right-0",
+  "top-center": "top-0 bottom-auto left-0 right-0 sm:mx-auto",
+};
+
+// ---- The store: module-level, so toast() works from anywhere ----------
+
+const EMPTY = { toasts: [], host: null };
+const AUTO = { auto: true };
+let state = EMPTY;
+let seq = 0;
+let auto = null;
+const hosts = [];
+const listeners = new Set();
+
+function set(next) {
+  state = { ...state, ...next };
+  for (const l of listeners) l();
+}
+
+function subscribe(l) {
+  listeners.add(l);
+  return () => listeners.delete(l);
+}
+
+const reduced = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+// No <Toaster /> on the page: lay one in <body>, in its own root.
+function mount() {
+  if (typeof document === "undefined" || state.host || auto) return;
+  const el = document.createElement("div");
+  el.setAttribute("data-toaster", "");
+  document.body.appendChild(el);
+  auto = { el, root: createRoot(el) };
+  set({ host: AUTO });
+  auto.root.render(<Host token={AUTO} />);
+}
+
+function show(title, options, tone) {
+  const { id: wanted, description, action, duration } = options ?? {};
+  const id = wanted ?? `toast-${++seq}`;
+  const was = state.toasts.find((t) => t.id === id);
+  const item = {
+    id,
+    tone,
+    title,
+    description,
+    action,
+    duration: duration ?? (tone === "loading" ? Infinity : DURATION),
+    version: (was?.version ?? 0) + 1,
+    leaving: false,
+  };
+  set({ toasts: was ? state.toasts.map((t) => (t.id === id ? item : t)) : [item, ...state.toasts] });
+  mount();
+  return id;
+}
+
+function dismiss(id) {
+  const hit = (t) => id === undefined || t.id === id;
+  if (!state.toasts.some((t) => hit(t) && !t.leaving)) return;
+  set({ toasts: state.toasts.map((t) => (hit(t) ? { ...t, leaving: true } : t)) });
+  setTimeout(() => set({ toasts: state.toasts.filter((t) => !(hit(t) && t.leaving)) }), reduced() ? 0 : EXIT_MS);
+}
+
+export function toast(title, options) {
+  return show(title, options, "neutral");
+}
+toast.success = (title, options) => show(title, options, "success");
+toast.error = (title, options) => show(title, options, "danger");
+toast.info = (title, options) => show(title, options, "info");
+toast.warning = (title, options) => show(title, options, "warning");
+toast.dismiss = dismiss;
+toast.promise = (promise, { loading = "Working…", success, error } = {}) => {
+  const p = typeof promise === "function" ? promise() : promise;
+  const id = show(loading, {}, "loading");
+  const settle = (message, value, tone) => {
+    const m = typeof message === "function" ? message(value) : message;
+    if (m == null || m === false) dismiss(id);
+    else if (typeof m === "object" && !isValidElement(m)) show(m.title, { ...m, id }, tone);
+    else show(m, { id }, tone);
+  };
+  Promise.resolve(p).then(
+    (v) => settle(success ?? "Done", v, "success"),
+    (e) => settle(error ?? "Something went wrong", e, "danger"),
+  );
+  return p;
+};
+
+// ---- The host ---------------------------------------------------------
+
+/** Where toasts stack. Optional — without one, the first toast mounts a
+ *  bottom-end host by itself. The newest <Toaster /> on the page wins. */
+export function Toaster({ position = "bottom-end", visible = 3, className }) {
+  const token = useRef(null);
+  if (!token.current) token.current = {};
+  useEffect(() => {
+    const own = token.current;
+    hosts.push(own);
+    set({ host: own });
+    if (auto) {
+      const a = auto;
+      auto = null;
+      setTimeout(() => {
+        a.root.unmount();
+        a.el.remove();
+      });
+    }
+    return () => {
+      hosts.splice(hosts.indexOf(own), 1);
+      set({ host: hosts[hosts.length - 1] ?? null });
+      if (!state.host && state.toasts.length) mount();
+    };
+  }, []);
+  return <Host token={token.current} position={position} visible={visible} className={className} />;
+}
+
+function Host({ token, position = "bottom-end", visible = 3, className }) {
+  const s = useSyncExternalStore(subscribe, () => state, () => EMPTY);
+  const pop = useRef(null);
+  const said = useRef(new Set());
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [hidden, setHidden] = useState(false);
+  const [heights, setHeights] = useState({});
+  const [say, setSay] = useState({ polite: "", assertive: "" });
+  const mine = s.host === token;
+  const items = mine ? s.toasts : [];
+  const live = items.filter((t) => !t.leaving);
+  const newest = live[0]?.id;
+  const top = position.startsWith("top");
+
+  // In the top layer while there is something to show. A modal <dialog>
+  // opened since would sit above it: show again to rise over it.
+  useLayoutEffect(() => {
+    const p = pop.current;
+    if (!p?.showPopover) return;
+    const open = p.matches(":popover-open");
+    if (items.length && !open) p.showPopover();
+    else if (!items.length && open) p.hidePopover();
+    else if (open && newest && document.querySelector("dialog:modal") && !p.contains(document.activeElement)) {
+      p.hidePopover();
+      p.showPopover();
+    }
+  }, [items.length, newest]);
+
+  // An emptied stack cannot report the pointer leaving it.
+  useEffect(() => {
+    if (items.length === 0) {
+      setHovered(false);
+      setFocused(false);
+    }
+  }, [items.length]);
+
+  useEffect(() => {
+    const on = () => setHidden(document.visibilityState === "hidden");
+    document.addEventListener("visibilitychange", on);
+    return () => document.removeEventListener("visibilitychange", on);
+  }, []);
+
+  // Each toast is announced once per version, a beat after the live
+  // region exists (a region born with its text is not read).
+  const timer = useRef(0);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  useEffect(() => {
+    const t = live.find((x) => !said.current.has(`${x.id}:${x.version}`));
+    if (!t) return;
+    said.current.add(`${t.id}:${t.version}`);
+    const text = [t.title, t.description].filter((x) => typeof x === "string" || typeof x === "number").join(". ");
+    if (!text) return;
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setSay(t.tone === "danger" ? { polite: "", assertive: text } : { polite: text, assertive: "" }), 100);
+  });
+
+  const measure = useCallback((id, h) => setHeights((prev) => (prev[id] === h ? prev : { ...prev, [id]: h })), []);
+
+  if (!mine) return null;
+
+  const expanded = hovered || focused;
+  const paused = expanded || hidden;
+  const shown = live.slice(0, visible);
+  let run = 0;
+  const offsets = shown.map((t) => {
+    const at = run;
+    run += (heights[t.id] ?? 0) + GAP;
+    return at;
+  });
+  const front = heights[shown[0]?.id] ?? 0;
+  const height = expanded ? Math.max(0, run - GAP) : front + PEEK * Math.max(0, shown.length - 1);
+
+  return (
+    <>
+      <div className="sr-only" role="status" aria-live="polite" aria-atomic="true">
+        {say.polite}
+      </div>
+      <div className="sr-only" aria-live="assertive" aria-atomic="true">
+        {say.assertive}
+      </div>
+      <section
+        ref={pop}
+        popover="manual"
+        aria-label="Notifications"
+        onPointerEnter={() => setHovered(true)}
+        onPointerLeave={() => setHovered(false)}
+        onFocus={() => setFocused(true)}
+        onBlur={(e) => {
+          if (!e.currentTarget.contains(e.relatedTarget)) setFocused(false);
+        }}
+        className={cx(
+          "pointer-events-none fixed z-50 m-0 h-auto w-full overflow-visible bg-transparent p-3 sm:w-96 sm:p-4",
+          PLACES[position] ?? PLACES["bottom-end"],
+          className,
+        )}
+      >
+        <ol className="relative transition-[height] duration-300 ease-out motion-reduce:transition-none" style={{ height }}>
+          {items.map((t) => {
+            const i = live.indexOf(t);
+            return (
+              <ToastItem
+                key={t.id}
+                t={t}
+                index={i}
+                top={top}
+                beyond={i >= visible}
+                offset={offsets[i] ?? 0}
+                expanded={expanded}
+                clip={!expanded && i > 0 ? front : undefined}
+                paused={paused}
+                onHeight={measure}
+              />
+            );
+          })}
+        </ol>
+      </section>
+    </>
+  );
+}
+
+function ToastItem({ t, index, top, beyond, offset, expanded, clip, paused, onHeight }) {
+  const inner = useRef(null);
+  const left = useRef(t.duration);
+  const ver = useRef(0);
+  const drag = useRef(null);
+  const last = useRef("");
+  const [dx, setDx] = useState(0);
+  const [exit, setExit] = useState(0);
+  const tone = TONES[t.tone] ?? TONES.neutral;
+
+  // The timer: counts down only while nothing holds the stack open; a
+  // new version (toast.promise settling, an update by id) starts it over.
+  useEffect(() => {
+    if (ver.current !== t.version) {
+      ver.current = t.version;
+      left.current = t.duration;
+    }
+    if (paused || t.leaving || !Number.isFinite(t.duration)) return;
+    const start = Date.now();
+    const h = setTimeout(() => dismiss(t.id), Math.max(0, left.current));
+    return () => {
+      clearTimeout(h);
+      left.current -= Date.now() - start;
+    };
+  }, [paused, t.leaving, t.version, t.duration, t.id]);
+
+  useLayoutEffect(() => {
+    const el = inner.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => onHeight(t.id, el.offsetHeight));
+    ro.observe(el);
+    onHeight(t.id, el.offsetHeight);
+    return () => ro.disconnect();
+  }, [t.id, onHeight]);
+
+  // Where it sits in the stack. A leaving toast keeps its last place
+  // while it fades, so the others close the gap at once.
+  const dir = top ? 1 : -1;
+  if (!t.leaving) {
+    const y = expanded ? offset : index * PEEK;
+    const k = expanded ? 1 : 1 - Math.min(index, 3) * 0.05;
+    last.current = `translateY(${dir * y}px) scale(${k})`;
+  }
+
+  function onPointerDown(e) {
+    if (e.button !== 0 || e.target.closest("button, a, input, textarea, select")) return;
+    drag.current = { x: e.clientX, at: e.timeStamp };
+    e.currentTarget.setPointerCapture(e.pointerId);
+  }
+  function onPointerMove(e) {
+    if (drag.current) setDx(e.clientX - drag.current.x);
+  }
+  function onPointerUp(e) {
+    const d = drag.current;
+    drag.current = null;
+    if (!d) return;
+    const moved = e.clientX - d.x;
+    const fast = Math.abs(moved) > 10 && Math.abs(moved) / Math.max(1, e.timeStamp - d.at) > 0.5;
+    if (Math.abs(moved) > SWIPE || fast) {
+      setExit(Math.sign(moved) || 1);
+      dismiss(t.id);
+    } else setDx(0);
+  }
+
+  const dragging = drag.current !== null && dx !== 0;
+  const style = {
+    zIndex: 1000 - Math.max(index, 0),
+    transform: last.current,
+    transformOrigin: top ? "bottom center" : "top center",
+    height: clip,
+    touchAction: "pan-y",
+  };
+  if (dragging) {
+    style.translate = `${dx}px 0`;
+    style.opacity = Math.max(0, 1 - Math.abs(dx) / 240);
+    style.transition = "none";
+  } else if (exit) style.translate = `${exit * 110}% 0`;
+
+  return (
+    <li
+      style={style}
+      inert={beyond || undefined}
+      aria-hidden={beyond || undefined}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onPointerCancel={() => {
+        drag.current = null;
+        setDx(0);
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Escape") dismiss(t.id);
+      }}
+      className={cx(
+        "pointer-events-auto absolute inset-x-0 select-none",
+        "transition-[opacity,translate,transform,height] duration-300 ease-out motion-reduce:transition-none",
+        top ? "top-0 starting:-translate-y-full" : "bottom-0 starting:translate-y-full",
+        "starting:opacity-0",
+        clip !== undefined && "overflow-hidden rounded-lg",
+        (t.leaving || beyond) && "opacity-0",
+        t.leaving && !exit && (top ? "-translate-y-2" : "translate-y-2"),
+        beyond && "pointer-events-none",
+      )}
+    >
+      <div
+        ref={inner}
+        className={cx(
+          "flex items-start gap-3 rounded-lg border bg-popover py-3 pl-4 pr-2 text-sm text-popover-foreground shadow-lg",
+          "[&>*]:transition-opacity [&>*]:duration-200 motion-reduce:[&>*]:transition-none",
+          tone.box,
+          clip !== undefined && "[&>*]:opacity-0",
+        )}
+      >
+        {t.tone === "loading" ? (
+          <Spinner size="sm" label={null} className="mt-0.5 text-muted-foreground" />
+        ) : tone.icon ? (
+          <Icon name={tone.icon} className={cx("mt-0.5 shrink-0", tone.color)} />
+        ) : null}
+        <div className="min-w-0 flex-1 py-px">
+          <p className="font-medium leading-snug [overflow-wrap:anywhere]">{t.title}</p>
+          {t.description ? <p className="mt-0.5 text-muted-foreground [overflow-wrap:anywhere]">{t.description}</p> : null}
+        </div>
+        {t.action ? (
+          <Button
+            size="sm"
+            variant="secondary"
+            className="-my-1 shrink-0"
+            onClick={(e) => {
+              t.action.onClick?.(e);
+              if (!e.defaultPrevented) dismiss(t.id);
+            }}
+          >
+            {t.action.label}
+          </Button>
+        ) : null}
+        <IconButton icon="x" label="Dismiss" size="sm" className="-my-1.5 shrink-0" onClick={() => dismiss(t.id)} />
+      </div>
+    </li>
+  );
+}

package/templates/next/files/components/ui/toggle.jsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { cx } from "./cx";
+import { Icon } from "./icon";
+
+// Toggle — a button that stays down: bold on, pinned, "show archived".
+// A real <button aria-pressed>, so Space and Enter work and a screen
+// reader says "pressed". Controlled (`pressed` + `onPressedChange(next)`)
+// or not (`defaultPressed`). A setting that saves is a Switch; a toggle
+// changes what THIS view shows or does. Off reads muted, on reads lit
+// (full text, the accent fill, a stronger edge) — never colour alone.
+//
+//   variant   secondary (bordered; the default) · quiet (no fill until pressed)
+//   size      md (44px) · sm (36px)
+//   icon      a name from ./icon; with no children the toggle is square
+//             and `label` is required (what a screen reader says)
+//
+// ToggleGroup below is a row of them as one control — the segmented
+// control. Arrow keys move between items (roving focus: the row is one
+// Tab stop), Space or Enter presses.
+
+const VARIANTS = {
+  secondary:
+    "bg-secondary text-muted-foreground border-border hover:bg-accent hover:text-foreground " +
+    "aria-pressed:bg-accent aria-pressed:text-accent-foreground aria-pressed:border-foreground/50",
+  quiet:
+    "bg-transparent text-muted-foreground border-transparent hover:bg-accent hover:text-foreground " +
+    "aria-pressed:bg-accent aria-pressed:text-accent-foreground",
+};
+
+// `square` is the icon-only toggle's own box, used INSTEAD of `box` —
+// never a px-0 laid over box's padding: cx does not merge classes, so
+// which of two paddings wins is CSS order, not the order written.
+const SIZES = {
+  md: { box: "min-h-11 px-3 text-sm", square: "size-11 px-0 text-sm", glyph: 18 },
+  sm: { box: "min-h-9 px-2.5 text-sm", square: "size-9 px-0 text-sm", glyph: 16 },
+};
+
+export function Toggle({
+  pressed,
+  defaultPressed = false,
+  onPressedChange,
+  variant = "secondary",
+  size = "md",
+  icon,
+  label,
+  className,
+  children,
+  onClick,
+  ...rest
+}) {
+  const [own, setOwn] = useState(defaultPressed);
+  const on = pressed ?? own;
+  const s = SIZES[size] ?? SIZES.md;
+  const square = icon && !children;
+  return (
+    <button
+      type="button"
+      aria-pressed={on}
+      aria-label={square ? label : undefined}
+      title={square ? label : undefined}
+      onClick={(e) => {
+        onClick?.(e);
+        if (e.defaultPrevented) return;
+        if (pressed === undefined) setOwn(!on);
+        onPressedChange?.(!on);
+      }}
+      className={cx(
+        "inline-flex items-center justify-center gap-2 rounded-md border font-medium whitespace-nowrap transition-colors",
+        "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        VARIANTS[variant] ?? VARIANTS.secondary,
+        square ? s.square : s.box,
+        className,
+      )}
+      {...rest}
+    >
+      {icon ? <Icon name={icon} size={square ? s.glyph : 16} /> : null}
+      {children}
+    </button>
+  );
+}
+
+// As SIZES: `square` replaces `item` for an icon-only item.
+const SEG = {
+  md: { track: "p-1", item: "min-h-9 px-3", square: "min-h-9 min-w-9 px-0", glyph: 18 },
+  sm: { track: "p-0.5", item: "min-h-8 px-2.5", square: "min-h-8 min-w-8 px-0", glyph: 16 },
+};
+
+/**
+ * A row of toggles as one control, the segmented look: a muted track,
+ * the pressed items raised. `type` single (exactly one pressed — pressing
+ * it again keeps it; a filter that can be off is `multiple`) · multiple.
+ * `value` is a string (single) or an array (multiple); `onChange` gets
+ * the same shape. md is 44px tall, sm 36px. Stretches when given a width
+ * (className="w-full"): the items share it.
+ *
+ *   items   [{ value, label, icon?, iconOnly?, disabled? }] — `iconOnly`
+ *           shows the icon alone; `label` is then what a screen reader says
+ */
+export function ToggleGroup({
+  type = "single",
+  items,
+  value,
+  defaultValue,
+  onChange,
+  size = "md",
+  disabled,
+  className,
+  "aria-label": ariaLabel,
+}) {
+  const multiple = type === "multiple";
+  const [own, setOwn] = useState(defaultValue ?? (multiple ? [] : undefined));
+  const current = value !== undefined ? value : own;
+  const refs = useRef([]);
+  const s = SEG[size] ?? SEG.md;
+  const live = (items ?? []).filter(Boolean);
+
+  const isOn = (v) => (multiple ? (current ?? []).includes(v) : current === v);
+  const usable = (i) => !disabled && !live[i]?.disabled;
+
+  function press(v) {
+    let next;
+    if (multiple) next = isOn(v) ? current.filter((x) => x !== v) : [...(current ?? []), v];
+    else if (current === v) return;
+    else next = v;
+    if (value === undefined) setOwn(next);
+    onChange?.(next);
+  }
+
+  // One Tab stop: the first pressed item, else the first usable one.
+  let stop = live.findIndex((it, i) => usable(i) && isOn(it.value));
+  if (stop < 0) stop = live.findIndex((_, i) => usable(i));
+
+  function onKeyDown(e, index) {
+    const step = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 0;
+    let next = null;
+    if (step) {
+      for (let k = 1; k <= live.length; k++) {
+        const i = (index + step * k + live.length) % live.length;
+        if (usable(i)) {
+          next = i;
+          break;
+        }
+      }
+    } else if (e.key === "Home") next = live.findIndex((_, i) => usable(i));
+    else if (e.key === "End") next = live.findLastIndex((_, i) => usable(i));
+    if (next === null || next < 0) return;
+    e.preventDefault();
+    refs.current[next]?.focus();
+  }
+
+  if (live.length === 0) return null;
+
+  return (
+    <div
+      role="group"
+      aria-label={ariaLabel}
+      className={cx("inline-flex max-w-full gap-1 rounded-md bg-muted", s.track, disabled && "opacity-50", className)}
+    >
+      {live.map((it, i) => {
+        const on = isOn(it.value);
+        const square = it.icon && it.iconOnly;
+        return (
+          <button
+            key={it.value}
+            ref={(el) => {
+              refs.current[i] = el;
+            }}
+            type="button"
+            aria-pressed={on}
+            aria-label={square ? it.label : undefined}
+            title={square ? it.label : undefined}
+            disabled={!usable(i)}
+            tabIndex={i === stop ? 0 : -1}
+            onClick={() => press(it.value)}
+            onKeyDown={(e) => onKeyDown(e, i)}
+            className={cx(
+              "inline-flex flex-1 items-center justify-center gap-2 rounded-sm text-sm font-medium whitespace-nowrap transition-colors",
+              "outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "disabled:cursor-not-allowed",
+              !disabled && "disabled:opacity-50",
+              square ? s.square : s.item,
+              on ? "bg-background text-foreground shadow-sm ring-1 ring-border" : "text-muted-foreground hover:text-foreground",
+            )}
+          >
+            {it.icon ? <Icon name={it.icon} size={square ? s.glyph : 16} /> : null}
+            {square ? null : it.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}