@bearmenu/ui 0.8.8 → 0.8.10

package/src/components/menu-kitchen-list.tsx

@@ -0,0 +1,284 @@
+import { Check, ChevronRight, Clock, MessageSquare, Star } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Separator } from "./separator";
+import { Skeleton } from "./skeleton";
+import type { MenuKitchenPreview, MenuLinkComponent, MenuLinkProps } from "./menu-types";
+
+/**
+ * MenuKitchenList — the intent page's spine.
+ *
+ * Venues ranked by how often reviews name their dishes, each row carrying the
+ * dish that earned it its place. Not a grid of dishes: a shortlist of rooms you
+ * could walk into.
+ *
+ * ## Two targets, and why this is not `<RankedVenueList>`
+ *
+ * The row goes to the venue. The dish name opens the item drawer — the same
+ * drawer the dish tiles open, listing every kitchen that makes it and for how
+ * much. Those are two different destinations inside one row, and the hub's
+ * `<RankedVenueList>` wraps its ENTIRE row in a single `LinkComponent`, so it
+ * structurally cannot express a second one. That is the reason this exists
+ * rather than a variant flag on that component.
+ *
+ * The mechanism is a stretched overlay, as in `<MenuItem>`: the venue link is
+ * an absolutely-positioned sibling at `z-[1]`, and the dish link sits above it
+ * at `z-[2]`. Nesting one anchor inside another is invalid HTML and breaks
+ * middle-click on both.
+ *
+ * The dish name is underlined so it reads as a target before it is pressed. The
+ * chevron belongs to the venue and stays on the right, away from it — an
+ * unmarked second target inside a row that already navigates is a trap.
+ *
+ * ## The filtered state changes the row's reason for being there
+ *
+ * With a dish or dietary filter on, each row swaps its most-named dish for the
+ * one that actually matched, and the kicker changes with it ("MOST NAMED HERE"
+ * → "WHY IT MATCHES"). A filtered list whose rows still advertise their
+ * most-named dish is claiming the filter matched something it did not.
+ *
+ * ## Header
+ *
+ * Deliberately none. The page composes `<SectionHeader>` above it, the same way
+ * the events hub does, because the heading here carries a count and a "see the
+ * full ranking" link into `/top` that the list knows nothing about.
+ */
+
+/** @deprecated Alias of `MenuLinkProps`; kept for symmetry with the other menu surfaces. */
+export type MenuKitchenListLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: MenuKitchenListLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type MenuKitchenListLabels = {
+  /** Accessible prefix for the row's venue link, e.g. "Open". */
+  openVenue: (name: string) => string;
+  /** Accessible name for the dish link, e.g. "See Truffle Tagliatelle". */
+  openDish: (name: string) => string;
+  /** Accessible name for the open-now dot. */
+  openNow: string;
+  /** Reveals the next page of rows, e.g. "Show 10 more". */
+  showMore?: string;
+};
+
+export type MenuKitchenListProps = {
+  kitchens: MenuKitchenPreview[];
+  labels: MenuKitchenListLabels;
+  /**
+   * Reveals more rows IN PLACE. The intent page pages ten at a time and never
+   * navigates for the eleventh — the list is the page.
+   */
+  onShowMore?: () => void;
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+export function MenuKitchenList({
+  kitchens,
+  labels,
+  onShowMore,
+  linkComponent = DefaultLink,
+  className,
+}: MenuKitchenListProps) {
+  return (
+    <div className={cn("flex flex-col", className)}>
+      <ol>
+        {kitchens.map((kitchen, index) => (
+          <li key={kitchen.place.slug} className="[&:first-child>div]:pt-0">
+            {/* The DS `Separator`, drawn BETWEEN rows rather than a `border-t`
+                with a `first:` reset on every row. It lives inside the `<li>`
+                because `<ol>` admits only list items, so a sibling element
+                between them would be invalid markup. */}
+            {index > 0 && <Separator />}
+            <KitchenRow kitchen={kitchen} labels={labels} linkComponent={linkComponent} />
+          </li>
+        ))}
+      </ol>
+
+      {onShowMore && labels.showMore && (
+        <button
+          type="button"
+          onClick={onShowMore}
+          className="mt-2 self-start rounded-md py-2 text-[13px] font-bold text-accent transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none"
+        >
+          {labels.showMore}
+        </button>
+      )}
+    </div>
+  );
+}
+
+function KitchenRow({
+  kitchen,
+  labels,
+  linkComponent: LinkComponent,
+}: {
+  kitchen: MenuKitchenPreview;
+  labels: MenuKitchenListLabels;
+  linkComponent: MenuLinkComponent;
+}) {
+  const { place, dish } = kitchen;
+  const openNow = place.open_now === true;
+
+  return (
+    <div className="relative flex flex-wrap items-center gap-[11px] py-3 transition-colors hover:bg-muted/30 motion-reduce:transition-none lg:flex-nowrap lg:gap-4 lg:py-3.5">
+      {/* The venue link, stretched. `z-[1]` — the dish link sits above it. */}
+      <LinkComponent
+        href={kitchen.href}
+        aria-label={labels.openVenue(place.name)}
+        className="absolute inset-0 z-[1] rounded-xl focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+      />
+
+      <span className="relative h-[46px] w-[46px] shrink-0 overflow-hidden rounded-[11px] bg-[repeating-linear-gradient(135deg,oklch(0.78_0.018_55)_0_8px,oklch(0.84_0.012_58)_8px_16px)] lg:h-[58px] lg:w-[58px] lg:rounded-[13px]">
+        {place.thumbnail_url && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={place.thumbnail_url}
+            alt=""
+            loading="lazy"
+            decoding="async"
+            className="h-full w-full object-cover"
+          />
+        )}
+        <span
+          title={openNow ? labels.openNow : undefined}
+          className={cn(
+            "absolute right-[5px] top-[5px] h-[7px] w-[7px] rounded-full ring-2 ring-white/85",
+            openNow ? "bg-[var(--free,oklch(0.55_0.13_155))]" : "bg-[oklch(0.8_0.01_60)]"
+          )}
+        />
+      </span>
+
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5 lg:w-[226px] lg:flex-none">
+        <span className="truncate text-[14.5px] font-bold tracking-[-0.01em] lg:text-[15.5px]">
+          {place.name}
+        </span>
+        <span className="flex items-center gap-1 truncate text-xs text-muted-foreground">
+          {place.rating && (
+            <>
+              <Star className="h-[11px] w-[11px] shrink-0" aria-hidden />
+              {place.rating.rating}
+              {kitchen.metaLabel && " · "}
+            </>
+          )}
+          {kitchen.metaLabel}
+        </span>
+        {kitchen.hoursLabel && (
+          <span
+            className={cn(
+              "mt-[3px] inline-flex h-[21px] w-max items-center gap-[5px] rounded-md px-2 text-[10.5px] font-bold",
+              openNow
+                ? "bg-[oklch(0.96_0.02_155)] text-[var(--free,oklch(0.45_0.13_155))]"
+                : "bg-muted text-muted-foreground"
+            )}
+          >
+            <Clock className="h-2.5 w-2.5 shrink-0" aria-hidden />
+            {kitchen.hoursLabel}
+          </span>
+        )}
+      </div>
+
+      {dish && (
+        /* DESKTOP ONLY, where it is a column of its own beside the venue.
+           On the phone it wrapped to a third line under the row — kicker, dish,
+           mention count — which turned a four-line venue row into a seven-line
+           block and, ten rows down, buried the venue names the list exists to
+           be scanned for. The dish is not what a reader is choosing here; it is
+           one tap away on the venue's own page, with room to state it.
+
+           `order-5` puts it last in the visual order without moving it in the
+           DOM, where it belongs to the venue. */
+        <div className="hidden min-w-0 basis-full pl-[57px] lg:order-none lg:block lg:flex-1 lg:basis-auto lg:pl-0">
+          <span
+            className={cn(
+              "flex items-center gap-1.5 text-[9px] font-extrabold uppercase tracking-[0.1em]",
+              dish.matched ? "text-accent" : "text-[oklch(0.72_0.01_60)]"
+            )}
+          >
+            {dish.kicker}
+            {dish.matched && dish.matchLabel && (
+              <span className="inline-flex items-center gap-1 rounded-[5px] bg-accent-subtle px-1.5 py-px text-[10.5px] font-bold normal-case tracking-normal text-accent">
+                <Check className="h-2.5 w-2.5 shrink-0" aria-hidden />
+                {dish.matchLabel}
+              </span>
+            )}
+          </span>
+
+          {dish.href ? (
+            <LinkComponent
+              href={dish.href}
+              aria-label={labels.openDish(dish.name)}
+              className="relative z-[2] mt-0.5 block truncate font-serif text-[13.5px] italic underline decoration-[oklch(0.84_0.01_60)] decoration-1 underline-offset-[3px] transition-colors hover:text-accent hover:decoration-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none lg:text-[15px]"
+            >
+              {dish.name}
+            </LinkComponent>
+          ) : (
+            <span className="mt-0.5 block truncate font-serif text-[13.5px] italic lg:text-[15px]">
+              {dish.name}
+            </span>
+          )}
+
+          {dish.meta && (
+            <span className="mt-[3px] flex items-center gap-1 text-[11.5px] text-muted-foreground">
+              {!dish.matched && <MessageSquare className="h-2.5 w-2.5 shrink-0" aria-hidden />}
+              {dish.meta}
+            </span>
+          )}
+        </div>
+      )}
+
+      <div className="ml-auto flex shrink-0 items-center gap-[11px] lg:ml-0">
+        {kitchen.priceLabel && (
+          <span className="text-base font-extrabold tabular-nums text-accent">
+            {kitchen.priceLabel}
+          </span>
+        )}
+        <ChevronRight className="h-[15px] w-[15px] shrink-0 text-muted-foreground" aria-hidden />
+      </div>
+    </div>
+  );
+}
+
+// ─── Skeleton ───────────────────────────────────────────────────────────────
+
+/**
+ * The list's own loading state, at the row's own footprint.
+ *
+ * It lives HERE, beside the component, and that is the whole point: a skeleton
+ * kept in the consuming app drifts the moment the row's padding or thumbnail
+ * size changes, and the drift is invisible until a page reflows on load. The
+ * measurements below are the same literals the row above uses — change one and
+ * the diff shows you the other.
+ */
+export function MenuKitchenListSkeleton({
+  rows = 10,
+  className,
+}: {
+  rows?: number;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex flex-col", className)} aria-hidden>
+      {Array.from({ length: rows }, (_, index) => (
+        <div key={index}>
+          {index > 0 && <Separator />}
+          <div className="flex flex-wrap items-center gap-[11px] py-3 lg:flex-nowrap lg:gap-4 lg:py-3.5">
+            <Skeleton className="h-[46px] w-[46px] rounded-[11px] lg:h-[58px] lg:w-[58px] lg:rounded-[13px]" />
+            <div className="flex min-w-0 flex-1 flex-col gap-1.5 lg:w-[226px] lg:flex-none">
+              <Skeleton className="h-4 w-[60%]" />
+              <Skeleton className="h-3 w-[45%]" />
+              <Skeleton className="h-[21px] w-[120px] rounded-md" />
+            </div>
+            {/* Desktop only, as the real row's dish column now is. */}
+            <div className="hidden min-w-0 basis-full pl-[57px] lg:order-none lg:block lg:flex-1 lg:basis-auto lg:pl-0">
+              <Skeleton className="h-2.5 w-[90px]" />
+              <Skeleton className="mt-1.5 h-4 w-[70%]" />
+              <Skeleton className="mt-1.5 h-3 w-[40%]" />
+            </div>
+            <Skeleton className="ml-auto h-5 w-[56px] lg:ml-0" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}