@bearmenu/ui 0.8.7 → 0.8.9

package/src/components/menu-hub-hero.tsx

@@ -0,0 +1,187 @@
+import { cn } from "../lib/utils";
+
+/**
+ * MenuHubHero — the claim that opens a menu hub, proven by live figures.
+ *
+ * A statement rather than a count ("Nobody should have to walk in blind"),
+ * over a dark ground, with the catalogue's real numbers under it and one proof
+ * line that demonstrates what the catalogue can do that a single menu cannot.
+ *
+ * ## Why the ground is a texture and not a photograph
+ *
+ * Menu-item photography is AI-generated and never shown, and one venue
+ * photograph behind a claim about every venue in the city argues the wrong
+ * thing. The tile grid reads as "many menus" without being any of them.
+ * Callers that DO have a real, licensed image for the slot can pass
+ * `backgroundUrl` — venue photography, never a plate.
+ *
+ * ## Figures
+ *
+ * `figures` is a list, not four fixed slots: the drinks tab has different ones
+ * and the count changes when a number turns out to have nothing behind it.
+ * Every value is a pre-formatted string because thousands separators are
+ * locale-dependent and the DS owns no locale.
+ *
+ * Server-safe.
+ */
+
+export type MenuHubHeroFigure = {
+  /** Pre-formatted, e.g. "19,062". */
+  value: string;
+  label: string;
+};
+
+export type MenuHubHeroProps = {
+  /** Small caps line above the headline, e.g. "397 MENUS IN CLUJ-NAPOCA, READ IN FULL". */
+  kicker?: string;
+  /** Icon for the kicker, resolved by the caller. */
+  kickerIcon?: React.ReactNode;
+  headline: string;
+  body?: string;
+  figures?: MenuHubHeroFigure[];
+  /**
+   * The proof line — one demonstrated fact, e.g. "A margherita: 87 kitchens
+   * make one, 10 to 120 lei". Composed by the caller; clause order is
+   * locale-dependent.
+   */
+  proof?: React.ReactNode;
+  proofIcon?: React.ReactNode;
+  /** The action beside the proof line. Pass a rendered link or button. */
+  action?: React.ReactNode;
+  /** Real, licensed photograph for the ground. Venue imagery only — see above. */
+  backgroundUrl?: string;
+  /**
+   * Tiles for the mosaic ground — generic, cinematic, licensed stills, served
+   * from the consumer's own origin.
+   *
+   * A mosaic rather than one photograph because the hero's claim is about EVERY
+   * kitchen in the city: a single image makes it about one of them. Given fewer
+   * tiles than cells the list repeats, so a caller can ship six and still fill
+   * a 1440px hero.
+   */
+  tileUrls?: string[];
+  className?: string;
+};
+
+/** Enough cells to fill the widest hero without the grid reading as a pattern. */
+const TEXTURE_CELLS = 28;
+
+export function MenuHubHero({
+  kicker,
+  kickerIcon,
+  headline,
+  body,
+  figures,
+  proof,
+  proofIcon,
+  action,
+  backgroundUrl,
+  tileUrls,
+  className,
+}: MenuHubHeroProps) {
+  return (
+    <div
+      className={cn(
+        "relative flex min-h-[260px] overflow-hidden rounded-[20px] bg-[oklch(0.21_0.012_55)] lg:min-h-[440px]",
+        className
+      )}
+    >
+      {backgroundUrl ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={backgroundUrl}
+          alt=""
+          aria-hidden
+          className="absolute inset-0 h-full w-full object-cover opacity-[0.42]"
+        />
+      ) : (
+        <div
+          aria-hidden
+          className="absolute inset-0 grid auto-rows-fr grid-cols-4 gap-0.5 lg:grid-cols-7"
+        >
+          {Array.from({ length: TEXTURE_CELLS }, (_, cell) => {
+            const url = tileUrls?.length ? tileUrls[cell % tileUrls.length] : undefined;
+
+            return url ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                key={cell}
+                src={url}
+                alt=""
+                loading="lazy"
+                decoding="async"
+                className="h-full w-full object-cover"
+              />
+            ) : (
+              <div
+                key={cell}
+                className="bg-[repeating-linear-gradient(135deg,oklch(0.6_0.02_55)_0_9px,oklch(0.68_0.016_58)_9px_18px)] opacity-[0.42]"
+              />
+            );
+          })}
+        </div>
+      )}
+
+      {/*
+        Heavier over a photo mosaic than it was over flat texture: twelve
+        cinematic stills at full strength turn a claim into a collage and the
+        headline stops being the loudest thing on the banner. This keeps the
+        depth and gives the type its contrast back.
+      */}
+      <div
+        aria-hidden
+        className={cn(
+          "absolute inset-0",
+          tileUrls?.length || backgroundUrl
+            ? "bg-[linear-gradient(100deg,oklch(0.16_0.012_55_/_0.96)_0%,oklch(0.16_0.012_55_/_0.88)_52%,oklch(0.16_0.012_55_/_0.72)_100%)]"
+            : "bg-[linear-gradient(100deg,oklch(0.18_0.012_55_/_0.95)_0%,oklch(0.18_0.012_55_/_0.72)_52%,oklch(0.18_0.012_55_/_0.3)_100%)]"
+        )}
+      />
+
+      <div className="relative z-[1] flex w-full flex-col justify-center gap-3 p-5 text-white lg:gap-4 lg:px-12 lg:py-11">
+        {kicker && (
+          <span className="inline-flex w-max items-center gap-[7px] rounded-full bg-white/15 px-3 py-1.5 text-[11px] font-extrabold tracking-[0.11em]">
+            {kickerIcon}
+            {kicker}
+          </span>
+        )}
+
+        <h1 className="max-w-[640px] font-serif text-[32px] font-semibold leading-[1.04] tracking-[-0.025em] lg:text-[50px]">
+          {headline}
+        </h1>
+
+        {body && (
+          <p className="hidden max-w-[540px] text-sm leading-[1.6] opacity-[0.84] lg:block lg:text-[15.5px]">
+            {body}
+          </p>
+        )}
+
+        {figures && figures.length > 0 && (
+          // Two by two on the phone: four figures in one row wrapped to three and an orphan.
+          <div className="grid grid-cols-2 gap-x-6 gap-y-3 pt-3 lg:flex lg:flex-wrap lg:gap-x-8 lg:gap-y-4 lg:pt-1.5">
+            {figures.map((figure) => (
+              <div key={figure.label}>
+                <div className="text-2xl font-black leading-none tracking-[-0.03em] tabular-nums lg:text-[32px]">
+                  {figure.value}
+                </div>
+                <div className="mt-[5px] text-xs opacity-[0.72]">{figure.label}</div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {(proof || action) && (
+          <div className="mt-auto flex flex-wrap items-center gap-3 pt-5">
+            {proof && (
+              <span className="inline-flex min-h-11 items-center gap-2.5 rounded-full bg-white/10 px-4 py-2 text-[13px] backdrop-blur-[6px]">
+                {proofIcon}
+                {proof}
+              </span>
+            )}
+            {action}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/menu-intent-tiles.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Beef, Coffee, Leaf, MapPin, Pizza, UtensilsCrossed } from "lucide-react";
+import { MenuIntentTiles } from "./menu-intent-tiles";
+import { mockIntentTiles } from "./menu-mocks";
+
+const icons = [Pizza, Beef, Coffee, UtensilsCrossed, Leaf, MapPin];
+const tiles = mockIntentTiles.map((tile, index) => {
+  const Icon = icons[index];
+  return { ...tile, icon: <Icon /> };
+});
+
+const meta: Meta<typeof MenuIntentTiles> = {
+  title: "Menu/MenuIntentTiles",
+  component: MenuIntentTiles,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The sentence people arrive with, as six coloured tiles. An intent is a family plus a constraint — Italian *tonight*, burgers, coffee — and each tile is a destination, so `href` is required on the view model: a category page that does not exist is filtered out by the caller rather than rendered as a tile linking nowhere. Roughly thirty-two of thirty-eight cuisines have a page, so that is the normal case, not the edge one.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuIntentTiles>;
+
+export const Default: Story = { args: { tiles } };
+
+/** Two-up on a phone, six-up from `lg`. */
+export const Mobile: Story = {
+  args: { tiles },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** Without icons the tiles still read — the watermark is recognition, not information. */
+export const WithoutIcons: Story = { args: { tiles: mockIntentTiles } };
+
+/** Fewer tiles than a full row: the grid does not stretch them. */
+export const Partial: Story = { args: { tiles: tiles.slice(0, 3) } };

package/src/components/menu-intent-tiles.tsx

@@ -0,0 +1,76 @@
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+import type { MenuIntentTile, MenuLinkProps, MenuLinkComponent } from "./menu-types";
+
+/**
+ * MenuIntentTiles — the sentence people arrive with, as six coloured tiles.
+ *
+ * An intent is a family plus a constraint: Italian *tonight*, burgers, coffee.
+ * Each tile is a destination, so `href` is required on the view model — a
+ * category page that does not exist is filtered out by the caller rather than
+ * rendered as a tile that links nowhere. Roughly thirty-two of thirty-eight
+ * cuisines have a page, so that case is normal, not exceptional.
+ *
+ * The icon is a watermark bleeding off the bottom-right corner at low opacity,
+ * not a badge: it gives the tile a silhouette to be recognised by in a rail
+ * without competing with the label. It is `aria-hidden` — the label already
+ * says what the tile is.
+ *
+ * Server-safe.
+ */
+
+/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
+export type MenuIntentTilesLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: MenuIntentTilesLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type MenuIntentTilesProps = {
+  tiles: MenuIntentTile[];
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+export function MenuIntentTiles({
+  tiles,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: MenuIntentTilesProps) {
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-2 gap-3 lg:grid-cols-6 lg:gap-3.5",
+        className
+      )}
+    >
+      {tiles.map((tile) => (
+        <LinkComponent
+          key={tile.slug}
+          href={tile.href}
+          className="relative flex min-h-[110px] flex-col overflow-hidden rounded-2xl bg-muted p-3.5 text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 lg:min-h-[124px] lg:px-3.5 lg:pb-3.5 lg:pt-[15px]"
+          style={tile.gradient ? { backgroundImage: tile.gradient } : undefined}
+        >
+          {tile.icon && (
+            <span
+              aria-hidden
+              className="pointer-events-none absolute -bottom-2.5 -right-1.5 z-0 opacity-[0.22] [&>svg]:h-[62px] [&>svg]:w-[62px]"
+            >
+              {tile.icon}
+            </span>
+          )}
+
+          <span className="relative z-[1] flex h-full flex-col">
+            <span className="text-[14.5px] font-extrabold leading-[1.2] tracking-[-0.015em]">
+              {tile.label}
+            </span>
+            {tile.caption && (
+              <span className="mt-[3px] text-[11.5px] leading-[1.35]">{tile.caption}</span>
+            )}
+            <ChevronRight className="mt-auto h-4 w-4 opacity-85" aria-hidden />
+          </span>
+        </LinkComponent>
+      ))}
+    </div>
+  );
+}