@bearmenu/ui 0.8.8 → 0.8.9

package/src/components/motion-icon-set.tsx

@@ -76,12 +76,20 @@ const UTENSILS_TIMES = [0, 0.18, 0.72, 1];
  */
 const SEPARATION = 5;
 
+/**
+ * The fork is not centred on the crossing: its handle reaches ~13.9 units
+ * below (12,12) and its tines ~10.8 above, so upright it hung ~1.5 units lower
+ * than the knife. `FORK_LIFT` centres it in the uncrossed pose.
+ */
+const FORK_LIFT = -1.5;
+
 const fork: Variants = {
-  rest: { rotate: 0, x: 0, transition: returnTransition },
-  active: { rotate: -44, x: -SEPARATION, transition: returnTransition },
+  rest: { rotate: 0, x: 0, y: 0, transition: returnTransition },
+  active: { rotate: -44, x: -SEPARATION, y: FORK_LIFT, transition: returnTransition },
   play: {
     rotate: [0, 6, -50, -44],
     x: [0, 0.8, -6, -SEPARATION],
+    y: [0, 0, FORK_LIFT - 0.3, FORK_LIFT],
     transition: beats(UTENSILS_TIMES, 0.6),
   },
 };
@@ -98,6 +106,25 @@ const knife: Variants = {
 
 const CROSSING = { originX: "12px", originY: "12px" } as const;
 
+/**
+ * The fork's handle. Lucide leaves a gap between the handle and the neck where
+ * the knife crosses, so the two strokes never form a blob at the crossing. Once
+ * the fork swings clear the gap is just a broken fork, so the handle lengthens
+ * to meet the neck at (12,12) as it uncrosses and shortens again on the way
+ * back. Same command shape both ways, so the `d` tweens.
+ */
+const HANDLE_CROSSED = "M2.1 21.8 8.5 15.4";
+const HANDLE_CLEAR = "M2.1 21.8 12 12";
+
+const forkHandle: Variants = {
+  rest: { d: HANDLE_CROSSED, transition: returnTransition },
+  active: { d: HANDLE_CLEAR, transition: returnTransition },
+  play: {
+    d: [HANDLE_CROSSED, HANDLE_CROSSED, HANDLE_CLEAR, HANDLE_CLEAR],
+    transition: beats(UTENSILS_TIMES, 0.6),
+  },
+};
+
 /**
  * The one gesture that HOLDS: uncrossed is the active pose. ~89° of relative
  * separation, so the outline changes completely and the state is readable from
@@ -113,7 +140,7 @@ export function MotionUtensils(props: MotionIconProps) {
       />
       <motion.g variants={fork} style={CROSSING}>
         <path d="m16 2-2.3 2.3a3 3 0 0 0 0 4.2l1.8 1.8a3 3 0 0 0 4.2 0L22 8" />
-        <path d="m2.1 21.8 6.4-6.3" />
+        <motion.path variants={forkHandle} d={HANDLE_CROSSED} />
         <path d="m19 5-7 7" />
       </motion.g>
     </MotionIcon>

package/src/components/open-now-list.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { mockVenues } from "./menu-mocks";
+import { OpenNowList } from "./open-now-list";
+
+const metaLabels = {
+  "the-copper-yard": "pub · Centru",
+  "salt-and-stone": "restaurant · Centru",
+  "the-quiet-hours": "coffee · Centru",
+};
+
+const summaryLabels = {
+  "the-copper-yard": "Wings, truffle fries, ribs",
+  "salt-and-stone": "Pasta, antipasti, tiramisu",
+  "the-quiet-hours": "Filter, flat white, pastries",
+};
+
+const priceBandLabels = {
+  "the-copper-yard": "19—62 lei",
+  "salt-and-stone": "38—84 lei",
+  "the-quiet-hours": "8—26 lei",
+};
+
+const meta: Meta<typeof OpenNowList> = {
+  title: "Menu/OpenNowList",
+  component: OpenNowList,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[620px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Who is still serving, and until when. At half past ten this beats every other sort, which is why it is its own surface rather than a filter chip: the question is not \"what is good\" but \"what is possible\", and every other module answers the first. The closing time arrives pre-formatted because a trading day crossing midnight needs the venue's timezone and the reader's clock. The live dot is never the only signal — the pill carries the same fact in words.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof OpenNowList>;
+
+export const Default: Story = {
+  args: {
+    venues: mockVenues.slice(0, 3),
+    untilLabel: "until",
+    metaLabels,
+    summaryLabels,
+    priceBandLabels,
+  },
+};
+
+/** Without the summary line — a tighter row for a narrow column. */
+export const Compact: Story = {
+  args: { venues: mockVenues.slice(0, 3), untilLabel: "until", metaLabels, priceBandLabels },
+};
+
+/** A venue past closing has no pill; the row still lists. */
+export const MixedHours: Story = {
+  args: { venues: mockVenues, untilLabel: "until", metaLabels, priceBandLabels },
+};
+
+export const Mobile: Story = {
+  args: { venues: mockVenues.slice(0, 3), untilLabel: "until", metaLabels, summaryLabels },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/open-now-list.tsx

@@ -0,0 +1,127 @@
+import { ChevronRight, Clock } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Separator } from "./separator";
+import type { MenuVenuePreview, MenuLinkProps, MenuLinkComponent } from "./menu-types";
+
+/**
+ * OpenNowList — who is still serving, and until when.
+ *
+ * At half past ten this beats every other sort, which is why it is its own
+ * surface rather than a filter chip: the question is not "what is good" but
+ * "what is possible", and every other module on a hub answers the first one.
+ *
+ * The closing time arrives pre-formatted on the view model (`closes_at_label`)
+ * because the venue's own trading day can cross midnight — a bar closing at
+ * 04:00 closes on the following date — and resolving that needs the venue's
+ * timezone and the reader's clock, neither of which the DS has.
+ *
+ * The live dot is never the only signal that a venue is open: the closing pill
+ * carries the same fact in words, so the row reads without colour.
+ *
+ * Server-safe.
+ */
+
+/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
+export type OpenNowListLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: OpenNowListLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type OpenNowListProps = {
+  venues: MenuVenuePreview[];
+  /** Prefix on the closing pill, e.g. "until". */
+  untilLabel: string;
+  /** Composed meta line per venue, keyed by place slug, e.g. "pub · Centru". */
+  metaLabels?: Record<string, string>;
+  /** What the kitchen is still sending out, keyed by place slug. */
+  summaryLabels?: Record<string, string>;
+  /** Composed price band per venue, keyed by place slug, e.g. "19—62 lei". */
+  priceBandLabels?: Record<string, string>;
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+export function OpenNowList({
+  venues,
+  untilLabel,
+  metaLabels,
+  summaryLabels,
+  priceBandLabels,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: OpenNowListProps) {
+  return (
+    <ul className={cn("flex flex-col", className)}>
+      {venues.map((venue, index) => {
+        const { place } = venue;
+
+        return (
+          <li key={place.slug}>
+            {index > 0 && <Separator />}
+            <LinkComponent
+              href={venue.href}
+              className="flex flex-wrap items-center gap-x-3 gap-y-1.5 py-3 transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+            >
+              {/* 56px, not 40. At 40 the venue photograph was too small to be
+                  anything — a smudge of colour rather than a room you might
+                  recognise — which is the only reason it is on the row. */}
+              <span className="relative h-14 w-14 shrink-0 overflow-hidden rounded-xl bg-[repeating-linear-gradient(135deg,oklch(0.78_0.018_55)_0_8px,oklch(0.84_0.012_58)_8px_16px)]">
+                {place.thumbnail_url && (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={place.thumbnail_url}
+                    alt=""
+                    className="h-full w-full object-cover"
+                    loading="lazy"
+                  />
+                )}
+                <i
+                  aria-hidden
+                  className="absolute right-1 top-1 h-[7px] w-[7px] rounded-full bg-[var(--free,currentColor)] ring-2 ring-white/80"
+                />
+              </span>
+
+              <span className="min-w-0 flex-1">
+                <span className="block text-sm font-bold leading-snug tracking-[-0.01em]">
+                  {place.name}
+                </span>
+                {metaLabels?.[place.slug] && (
+                  <span className="mt-px block truncate text-[11.5px] text-muted-foreground">
+                    {metaLabels[place.slug]}
+                  </span>
+                )}
+              </span>
+
+              {summaryLabels?.[place.slug] && (
+                <span className="order-last w-full truncate text-[12.5px] text-muted-foreground lg:order-none lg:w-auto lg:flex-1">
+                  {summaryLabels[place.slug]}
+                </span>
+              )}
+
+              {/* Price over hours on the phone — side by side they squeezed a
+                  three-line venue name; one row again from lg. */}
+              {(venue.closes_at_label || priceBandLabels?.[place.slug]) && (
+                <span className="flex shrink-0 flex-col items-end gap-1 lg:flex-row lg:items-center lg:gap-3">
+                  {priceBandLabels?.[place.slug] && (
+                    <span className="text-[12.5px] tabular-nums text-muted-foreground">
+                      {priceBandLabels[place.slug]}
+                    </span>
+                  )}
+                  {venue.closes_at_label && (
+                    <span className="inline-flex h-6 items-center gap-1 rounded-full bg-[var(--free-subtle,var(--accent-subtle))] px-2.5 text-[11.5px] font-semibold tabular-nums">
+                      <Clock className="h-[11px] w-[11px]" aria-hidden />
+                      {`${untilLabel} ${venue.closes_at_label}`}
+                    </span>
+                  )}
+                </span>
+              )}
+
+              <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+            </LinkComponent>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/src/components/place-types.ts

@@ -31,6 +31,13 @@ export type PlacePreview = {
   landmarks?: Array<{ name: string; distance_meters?: number }>
   areas?: Array<{ name: string }>
   busyness?: Array<{ hour: number; score: number }>
+  /**
+   * The review distillation. Drives every menu-hub surface that speaks for a
+   * venue — `<VenueSpotlight>`, `<RankedVenueList>`, `<SignatureLineList>` —
+   * because the signature dish, the pull-quotes and the graded dimensions all
+   * live here rather than on the menu itself.
+   */
+  reviews_digest?: PlaceReviewsDigest
   type?: string
   business_status?: 'operational' | 'closed_temporarily' | 'closed_permanently'
   phone?: string
@@ -60,6 +67,111 @@ export type PlaceSchedule = Record<WeekdayKey, PlaceHourBlock[]>
 export type PlacePriceRange = {
   price_range_low?: number
   price_range_high?: number
+  /** Median price across the place's menu, in the local currency. */
+  median_price?: number
+}
+
+/**
+ * Menu items are priced per size; a single-size item still ships one entry.
+ *
+ * Defined here rather than in `menu-types.ts` because `PlaceMustTry` carries
+ * it, and `menu-types.ts` already imports from this file — keeping the
+ * definition here leaves that import one-directional. `menu-types.ts`
+ * re-exports it, so menu code never reaches into place types for it.
+ */
+export type MenuSizeAndPrice = {
+  /** Grams or millilitres. */
+  size: number
+  price: number
+  discounted_price?: number
+  discount_percentage?: number
+}
+
+/** A digest string with the reviews that back it. `review_ids.length` is the mention count. */
+export type CitedText = { text: string; review_ids?: string[] }
+
+/** A digest enum value with the reviews that back it. The value is a language-neutral code. */
+export type CitedValue = { value: string; review_ids?: string[] }
+
+/**
+ * One dish or drink the reviews single out.
+ *
+ * `mentions` and `score` come from the item census and are only served by the
+ * place DETAIL endpoint — a listing carries the item without them. Surfaces
+ * that need a count from a list fall back to `review_ids.length`, which is
+ * present in both. `strength`, `why` and `review_ids` are absent for census
+ * items the prose digest never mentioned, so none of them can be assumed.
+ */
+export type PlaceMustTry = {
+  name: string
+  why?: string
+  strength?: 'signature' | 'frequent' | 'occasional'
+  /** Deep-link slug. Present only when the item matched a live menu row. */
+  slug?: string
+  sizes_and_prices?: MenuSizeAndPrice[]
+  review_ids?: string[]
+  /** 0–100 census sentiment. Detail endpoint only; 3+ mentions required. */
+  score?: number
+  /** Censused review mentions of this item. Detail endpoint only. */
+  mentions?: number
+}
+
+/**
+ * Per-dimension 0–100 review scores.
+ *
+ * A dimension the reviews never mention is ABSENT, not zero — so a surface
+ * drawing these must render what it is given rather than a fixed row of seven.
+ * Exactly one of `food` / `coffee_quality` / `drinks_quality` is scored per
+ * place: a coffee bar has no food score and a restaurant has no coffee one.
+ */
+export type PlaceGradeDimensions = {
+  food?: number
+  coffee_quality?: number
+  drinks_quality?: number
+  value?: number
+  service?: number
+  cleanliness?: number
+  ambiance?: number
+  portion?: number
+  consistency?: number
+}
+
+export type PlaceGrade = {
+  /** 1.0–10.0. */
+  overall?: number
+  /**
+   * Backend recommendation to show the number at all. When false the caller
+   * should draw a "building confidence" state instead — the DS renders what it
+   * is told, it does not apply the rule.
+   */
+  show_number?: boolean
+  /** Locale-resolved band label, e.g. "Foarte bun". Already translated upstream. */
+  descriptor?: string
+  confidence?: 'low' | 'medium' | 'high'
+  capped?: boolean
+  dimensions?: PlaceGradeDimensions
+}
+
+export type PlaceReviewsDigest = {
+  grade?: PlaceGrade
+  grade_note?: string
+  tagline?: CitedText
+  verdict?: CitedText
+  caveat?: CitedText
+  /** 1–3 standout positives. The pull-quotes on `<VenueSpotlight>`. */
+  highlights?: CitedText[]
+  must_try?: PlaceMustTry[]
+  /** Vibe codes (cozy, quiet, family_friendly, …). Localised by the caller. */
+  tags?: CitedValue[]
+  dietary?: CitedValue[]
+  /** small | moderate | generous */
+  portion_size?: CitedValue
+  /** cheap | fair | mid_range | splurge */
+  value?: CitedValue
+  /** quiet | moderate | loud */
+  noise_level?: CitedValue
+  /** Text reviews behind the digest. */
+  review_count?: number
 }
 
 /** Labels passed to `<PlaceCard>`. All translation happens in the caller. */

package/src/components/ranked-venue-list.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { mockVenues } from "./menu-mocks";
+import { RankedVenueList } from "./ranked-venue-list";
+
+const priceBandLabels = {
+  "the-copper-yard": "19—62",
+  "salt-and-stone": "38—84",
+  "the-quiet-hours": "8—26",
+  "green-room-canteen": "22—51",
+};
+
+const meta: Meta<typeof RankedVenueList> = {
+  title: "Menu/RankedVenueList",
+  component: RankedVenueList,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[620px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Venues ordered by how often reviews name their dishes — the answer to \"best Italian in Cluj\". What makes the order defensible is the mention count on every row: it is evidence, not opinion. A caller that cannot supply mentions should use a different surface rather than this one with the column blank, because an unexplained ranking is worse than none. The tab strip re-ranks in place and never navigates.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RankedVenueList>;
+
+export const Default: Story = {
+  args: {
+    venues: mockVenues.slice(0, 3),
+    heading: "The kitchens Cluj rates for Italian",
+    caption: "by how often reviews name their dishes",
+    priceBandLabels,
+  },
+};
+
+/** With tabs. `activeTab` and `onTabChange` are the caller's state. */
+export const WithTabs: Story = {
+  args: {
+    venues: mockVenues.slice(0, 3),
+    heading: "The kitchens Cluj rates",
+    caption: "from review mentions, not opinion",
+    tabs: [
+      { slug: "italian", label: "Italian" },
+      { slug: "romanesc", label: "Romanian" },
+      { slug: "japonez", label: "Japanese" },
+      { slug: "burgeri", label: "Burgers" },
+    ],
+    activeTab: "italian",
+    onTabChange: () => {},
+    priceBandLabels,
+  },
+};
+
+/** No header at all — the list inside a section that already has one. */
+export const Bare: Story = { args: { venues: mockVenues.slice(0, 3), priceBandLabels } };
+
+/** A venue with no signature still ranks; its quoted dish line is simply absent. */
+export const MixedEvidence: Story = {
+  args: { venues: mockVenues, heading: "The kitchens Cluj rates", priceBandLabels },
+};
+
+export const Mobile: Story = {
+  args: { venues: mockVenues.slice(0, 3), heading: "The kitchens Cluj rates" },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/ranked-venue-list.tsx

@@ -0,0 +1,177 @@
+import { ChevronRight, MessageSquare, Star } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Separator } from "./separator";
+import type { MenuVenuePreview, MenuLinkProps, MenuLinkComponent } from "./menu-types";
+
+/**
+ * RankedVenueList — venues ordered by how often reviews name their dishes.
+ *
+ * The answer to "best Italian in Cluj", and the reason it is defensible is the
+ * mention count sitting on every row: the order is evidence, not opinion. A
+ * caller that cannot supply mentions should use a different surface rather than
+ * this one with the column blank — an unexplained ranking is worse than none.
+ *
+ * The tab strip re-ranks in place and never navigates, so `activeTab` and
+ * `onTabChange` are controlled by the caller. Omit `tabs` entirely and the
+ * header is just a heading.
+ *
+ * No directive: without `tabs` the list renders on the server, which is the
+ * common case on a hub.
+ */
+
+/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
+export type RankedVenueListLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: RankedVenueListLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type RankedVenueListTab = {
+  slug: string;
+  label: string;
+};
+
+export type RankedVenueListProps = {
+  venues: MenuVenuePreview[];
+  /** Section heading, e.g. "The kitchens Cluj rates for Italian". */
+  heading?: string;
+  /** The basis of the order, e.g. "by how often reviews name their dishes". */
+  caption?: string;
+  tabs?: RankedVenueListTab[];
+  activeTab?: string;
+  onTabChange?: (slug: string) => void;
+  /** Composed price band per venue, keyed by place slug, e.g. "38—84". */
+  priceBandLabels?: Record<string, string>;
+  /**
+   * The app's own grade per venue slug, already formatted ("8.7"). Shown in
+   * place of the star rating when present — the star is the third-party
+   * fallback for a venue the reviews have not graded yet.
+   */
+  gradeLabels?: Record<string, string>;
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+export function RankedVenueList({
+  venues,
+  heading,
+  caption,
+  tabs,
+  activeTab,
+  onTabChange,
+  priceBandLabels,
+  gradeLabels,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: RankedVenueListProps) {
+  return (
+    <div className={cn("overflow-hidden rounded-[14px] border border-border bg-card", className)}>
+      {(heading || tabs) && (
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-2 border-b border-border p-3.5">
+          {heading && (
+            <h3 className="text-[15px] font-bold leading-tight tracking-[-0.01em]">{heading}</h3>
+          )}
+          {caption && (
+            <span className="text-[12.5px] text-muted-foreground">{caption}</span>
+          )}
+          {tabs && tabs.length > 0 && (
+            <div className="ml-auto flex flex-wrap gap-1.5">
+              {tabs.map((tab) => (
+                <button
+                  key={tab.slug}
+                  type="button"
+                  aria-pressed={tab.slug === activeTab}
+                  onClick={() => onTabChange?.(tab.slug)}
+                  className={cn(
+                    "inline-flex h-7 items-center rounded-full border px-2.5 text-xs font-semibold transition-colors",
+                    tab.slug === activeTab
+                      ? "border-accent bg-accent-subtle text-accent"
+                      : "border-border text-muted-foreground hover:bg-muted/50"
+                  )}
+                >
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      <ol>
+        {venues.map((venue, index) => {
+          const { place, signature } = venue;
+          const mentions = signature?.item.mentions ?? 0;
+
+          return (
+            <li key={place.slug}>
+            {index > 0 && <Separator />}
+              <LinkComponent
+                href={venue.href}
+                className="flex items-center gap-3 p-3 transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+              >
+                <span className="w-4 shrink-0 text-center text-[13px] font-extrabold tabular-nums text-accent">
+                  {index + 1}
+                </span>
+
+                {/* 48px. Same reason as `OpenNowList`: below ~48 the venue
+                    photograph stops being a photograph. */}
+                <span className="h-12 w-12 shrink-0 overflow-hidden rounded-xl bg-[repeating-linear-gradient(135deg,oklch(0.78_0.018_55)_0_8px,oklch(0.84_0.012_58)_8px_16px)]">
+                  {place.thumbnail_url && (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={place.thumbnail_url}
+                      alt=""
+                      className="h-full w-full object-cover"
+                      loading="lazy"
+                    />
+                  )}
+                </span>
+
+                <span className="min-w-0 flex-1">
+                  {/* The whole name: a ranked list is a list of names, and a
+                      name cut to "PASQUALE | brunch & din…" is not one. */}
+                  <span className="block text-sm font-bold leading-snug tracking-[-0.01em]">
+                    {place.name}
+                  </span>
+                  {signature?.item.name && (
+                    <span className="mt-px block truncate font-serif text-xs italic text-muted-foreground">
+                      {`“${signature.item.name}”`}
+                    </span>
+                  )}
+                </span>
+
+                {mentions > 0 && (
+                  <span className="hidden shrink-0 items-center gap-1 text-[11.5px] tabular-nums text-muted-foreground sm:inline-flex">
+                    <MessageSquare className="h-[11px] w-[11px]" aria-hidden />
+                    {mentions}
+                  </span>
+                )}
+
+                {gradeLabels?.[place.slug] ? (
+                  <span className="inline-flex h-6 shrink-0 items-center rounded-md bg-foreground px-1.5 text-[12px] font-extrabold tabular-nums text-background">
+                    {gradeLabels[place.slug]}
+                  </span>
+                ) : (
+                  place.rating && (
+                    <span className="inline-flex shrink-0 items-center gap-1 text-[12.5px] font-semibold tabular-nums">
+                      <Star className="h-3 w-3" aria-hidden />
+                      {place.rating.rating}
+                    </span>
+                  )
+                )}
+
+                {priceBandLabels?.[place.slug] && (
+                  <span className="hidden shrink-0 text-[12.5px] tabular-nums text-muted-foreground sm:block">
+                    {priceBandLabels[place.slug]}
+                  </span>
+                )}
+
+                <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+              </LinkComponent>
+            </li>
+          );
+        })}
+      </ol>
+    </div>
+  );
+}