makersclaw 0.2.0 → 0.3.0

package/registry/blocks/map/list.jsx

@@ -0,0 +1,128 @@
+"use client";
+
+// The places beside the map: a searchable list (a column on the left
+// when the block is wide, a whole view behind a "List" button when it is
+// narrow) and, on a phone, a strip of cards under the map. Kit Items; the
+// map and the list share one selection and one hover.
+import { forwardRef } from "react";
+import { Button, Empty, InputGroup, Item, cx } from "../../ui";
+import { Dot } from "./marks";
+
+export const ListPanel = forwardRef(function ListPanel(
+  { rows, unlocated, total, query, onQuery, search, plural, noun, selected, onPick, onHover, onShowMap, empty, className },
+  ref,
+) {
+  const shown = rows.length + unlocated.length;
+  const count = query ? `${shown} of ${total} ${total === 1 ? noun : plural}` : `${total} ${total === 1 ? noun : plural}`;
+  return (
+    <aside className={cx("min-h-0 flex-col bg-card", className)} aria-label={`${plural[0].toUpperCase()}${plural.slice(1)}`}>
+      <div className="flex items-center gap-2 px-3 pt-3">
+        {search ? (
+          <InputGroup
+            icon="search"
+            type="text"
+            enterKeyHint="search"
+            value={query}
+            onChange={(e) => onQuery(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Escape" && query) {
+                e.stopPropagation();
+                onQuery("");
+              }
+            }}
+            placeholder={`Search ${plural}`}
+            aria-label={`Search ${plural}`}
+            action={query ? { label: "Clear search", icon: "x", onClick: () => onQuery("") } : undefined}
+          />
+        ) : (
+          <div className="flex-1" />
+        )}
+        <Button variant="secondary" size="sm" icon="map" onClick={onShowMap} className="@3xl:hidden">
+          Map
+        </Button>
+      </div>
+      <p className="px-4 pb-1.5 pt-2 text-xs text-muted-foreground" aria-live="polite" data-nums>
+        {total ? count : ""}
+      </p>
+      <div ref={ref} className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-2 pb-2">
+        {total === 0 ? (
+          empty
+        ) : shown === 0 ? (
+          <Empty
+            icon="search"
+            title={`No ${plural} match “${query.trim()}”`}
+            body="Check the spelling, or try another word."
+            action={
+              <Button variant="secondary" size="sm" onClick={() => onQuery("")}>
+                Clear search
+              </Button>
+            }
+            className="mx-1 mt-2 border-0"
+          />
+        ) : (
+          <>
+            {rows.map((r) => (
+              <Row key={r.id} r={r} selected={selected === r.id} onPick={onPick} onHover={onHover} />
+            ))}
+            {unlocated.length ? (
+              <>
+                <p className="px-2 pb-1 pt-4 text-xs font-medium text-muted-foreground" data-nums>
+                  Not on the map · {unlocated.length}
+                </p>
+                {unlocated.map((r) => (
+                  <Row key={r.id} r={r} selected={selected === r.id} onPick={onPick} onHover={onHover} missing />
+                ))}
+              </>
+            ) : null}
+          </>
+        )}
+      </div>
+    </aside>
+  );
+});
+
+function Row({ r, selected, onPick, onHover, missing }) {
+  return (
+    <Item
+      data-map-id={r.id}
+      title={r.title}
+      description={r.meta ?? (missing ? "No location yet" : undefined)}
+      meta={r.aside ?? undefined}
+      media={<Dot tone={r.tone} missing={missing} />}
+      onClick={() => onPick(r.id)}
+      aria-current={selected ? "true" : undefined}
+      onMouseEnter={() => onHover(r.id)}
+      onMouseLeave={() => onHover(null)}
+      className={cx("rounded-md transition-colors duration-150", r.hovered && !selected && "bg-accent/60")}
+    />
+  );
+}
+
+/** A phone's strip of cards under the map: tap one to select it; the
+ *  selected card scrolls into view when the map picks another. */
+export const Strip = forwardRef(function Strip({ rows, selected, onPick, className }, ref) {
+  return (
+    <div className={cx("border-t border-border bg-card", className)}>
+      <div
+        ref={ref}
+        className="flex snap-x snap-mandatory gap-2 overflow-x-auto overscroll-x-contain px-3 py-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      >
+        {rows.map((r) => (
+          <div key={r.id} data-map-id={r.id} className="w-[80%] max-w-72 shrink-0 snap-center">
+            <Item
+              variant="outline"
+              size="sm"
+              title={r.title}
+              description={r.meta}
+              meta={r.aside ?? undefined}
+              media={<Dot tone={r.tone} />}
+              onClick={() => onPick(r.id)}
+              aria-current={selected === r.id ? "true" : undefined}
+              className={cx("h-full rounded-lg transition-colors duration-150", selected === r.id && "ring-1 ring-inset ring-primary")}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+});