@bearmenu/ui 0.8.8 → 0.8.10

package/src/components/venue-grade-dimensions.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { mockFormatters, mockPlaces } from "./menu-mocks";
+import { VenueGradeDimensions } from "./venue-grade-dimensions";
+
+const labels = {
+  food: "Food",
+  coffee_quality: "Coffee",
+  drinks_quality: "Drinks",
+  service: "Service",
+  value: "Value",
+  ambiance: "Ambiance",
+  portion: "Portion",
+  consistency: "Consistency",
+  cleanliness: "Cleanliness",
+};
+
+const meta: Meta<typeof VenueGradeDimensions> = {
+  title: "Menu/VenueGradeDimensions",
+  component: VenueGradeDimensions,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[720px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Per-dimension review scores as a row of bars. A dimension the reviews never mention is ABSENT from the payload, not zero, and exactly one of food / coffee_quality / drinks_quality is scored per place — so a component drawing a fixed row of seven would invent readings for a third of the catalogue. It iterates the canonical order, skips what is missing, and lays out however many survive. Scores arrive 0–100 and display over ten.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof VenueGradeDimensions>;
+
+export const Default: Story = {
+  args: {
+    dimensions: mockPlaces[0].reviews_digest!.grade!.dimensions!,
+    labels,
+    formatScore: mockFormatters.score,
+  },
+};
+
+/**
+ * A coffee bar. It is graded on `coffee_quality` and has no food score at all —
+ * the row is four columns, not seven with a gap.
+ */
+export const CoffeeBar: Story = {
+  args: {
+    dimensions: mockPlaces[2].reviews_digest!.grade!.dimensions!,
+    labels,
+    formatScore: mockFormatters.score,
+  },
+};
+
+/** Thin evidence: only two dimensions were mentioned often enough to score. */
+export const Sparse: Story = {
+  args: {
+    dimensions: { food: 78, value: 64 },
+    labels,
+    formatScore: mockFormatters.score,
+  },
+};
+
+/** `order` narrows as well as reorders — here, quality and value only. */
+export const Narrowed: Story = {
+  args: {
+    dimensions: mockPlaces[0].reviews_digest!.grade!.dimensions!,
+    labels,
+    order: ["food", "value"],
+    formatScore: mockFormatters.score,
+  },
+};
+
+/** Nothing scored: the component renders nothing rather than an empty row. */
+export const Empty: Story = {
+  args: { dimensions: {}, labels, formatScore: mockFormatters.score },
+};

package/src/components/venue-grade-dimensions.tsx

@@ -0,0 +1,91 @@
+import { cn } from "../lib/utils";
+import type { PlaceGradeDimensions } from "./place-types";
+
+/**
+ * VenueGradeDimensions — the per-dimension review scores as a row of bars.
+ *
+ * ## Why this renders what it is given rather than a fixed row
+ *
+ * A dimension the reviews never mention is ABSENT from the payload, not zero,
+ * and 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.
+ * So a component drawing seven fixed columns would invent readings for a third
+ * of the catalogue. It iterates `order`, skips what is missing, and lays out
+ * however many survive.
+ *
+ * Scores arrive 0–100 and display on the 0–10 scale the rest of the product
+ * grades on, so the bar width is the raw value and the numeral is that value
+ * over ten. `formatScore` is injected because a decimal separator is
+ * locale-dependent.
+ *
+ * Server-safe.
+ */
+
+export type VenueGradeDimensionKey = keyof PlaceGradeDimensions;
+
+/** Canonical order. Quality leads, and the three quality keys are mutually exclusive. */
+export const DIMENSION_ORDER: VenueGradeDimensionKey[] = [
+  "food",
+  "coffee_quality",
+  "drinks_quality",
+  "service",
+  "value",
+  "ambiance",
+  "portion",
+  "consistency",
+  "cleanliness",
+];
+
+export type VenueGradeDimensionsProps = {
+  dimensions: PlaceGradeDimensions;
+  /** Dimension key → translated label. Keys with no label fall back to the key. */
+  labels: Partial<Record<VenueGradeDimensionKey, string>>;
+  /** Override the canonical order, or narrow which dimensions show at all. */
+  order?: VenueGradeDimensionKey[];
+  /** 0–100 → display numeral, e.g. `(v) => (v / 10).toFixed(1)`. */
+  formatScore: (value: number) => string;
+  className?: string;
+};
+
+export function VenueGradeDimensions({
+  dimensions,
+  labels,
+  order = DIMENSION_ORDER,
+  formatScore,
+  className,
+}: VenueGradeDimensionsProps) {
+  const present = order
+    .map((key) => ({ key, value: dimensions[key] }))
+    .filter((entry): entry is { key: VenueGradeDimensionKey; value: number } =>
+      typeof entry.value === "number"
+    );
+
+  if (present.length === 0) return null;
+
+  return (
+    <dl
+      className={cn(
+        "grid grid-cols-3 gap-2.5 sm:grid-cols-4 lg:flex lg:gap-2.5",
+        className
+      )}
+    >
+      {present.map(({ key, value }) => (
+        <div key={key} className="flex flex-col gap-1.5 lg:flex-1">
+          <dd className="text-[15px] font-extrabold tracking-[-0.02em] tabular-nums">
+            {formatScore(value)}
+          </dd>
+          <div
+            aria-hidden
+            className="relative block h-[3px] overflow-hidden rounded-full bg-muted"
+          >
+            <span
+              className="absolute inset-y-0 left-0 rounded-full bg-[var(--gradient-primary,currentColor)]"
+              style={{ width: `${Math.min(100, Math.max(0, value))}%` }}
+            />
+          </div>
+          <dt className="text-[10.5px] text-muted-foreground">{labels[key] ?? key}</dt>
+        </div>
+      ))}
+    </dl>
+  );
+}

package/src/components/venue-quotes.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { mockPlaces } from "./menu-mocks";
+import { VenueQuotes } from "./venue-quotes";
+
+const highlights = mockPlaces[0].reviews_digest!.highlights!;
+
+const meta: Meta<typeof VenueQuotes> = {
+  title: "Menu/VenueQuotes",
+  component: VenueQuotes,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[720px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The digest's standout lines as pull-quotes — one to three short positives, already resolved into the request locale. They are the only place on a hub where a reviewer speaks in their own register, so they are set in serif italic against the sans everything else uses. `onCite` turns a quote into a button opening the reviews behind it: `review_ids` is what makes the claim checkable, and a quote nobody can trace is just copy.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof VenueQuotes>;
+
+/** Inert prose. Correct on a surface with nowhere to open. */
+export const Default: Story = { args: { quotes: highlights } };
+
+/** With `onCite` each quote becomes a button onto its own evidence. */
+export const Citable: Story = {
+  args: {
+    quotes: highlights,
+    onCite: () => {},
+    citeLabel: (count) => `Read ${count} reviews`,
+  },
+};
+
+/** A quote with no `review_ids` stays inert even when `onCite` is passed. */
+export const MixedEvidence: Story = {
+  args: {
+    quotes: [highlights[0], { text: "Worth the walk from the centre." }],
+    onCite: () => {},
+    citeLabel: (count) => `Read ${count} reviews`,
+  },
+};
+
+export const Single: Story = { args: { quotes: [highlights[0]] } };
+
+export const Limited: Story = {
+  args: {
+    quotes: [...highlights, { text: "A third line the surface has no room for." }],
+    limit: 2,
+  },
+};

package/src/components/venue-quotes.tsx

@@ -0,0 +1,64 @@
+import { cn } from "../lib/utils";
+import type { CitedText } from "./place-types";
+
+/**
+ * VenueQuotes — the digest's standout lines, as pull-quotes.
+ *
+ * These are `reviews_digest.highlights`: one to three short positives already
+ * resolved into the request locale. They are the only place on a hub where a
+ * reviewer speaks in their own register, so they are set in serif italic
+ * against the sans everything else uses.
+ *
+ * `onCite` turns a quote into a button that opens the reviews behind it —
+ * `review_ids` is what makes the claim checkable, and a quote nobody can trace
+ * is just copy. Without the handler the quote renders as inert prose, which is
+ * correct on surfaces that have nowhere to open.
+ *
+ * No directive: inert quotes render on the server; passing `onCite` needs a
+ * client caller.
+ */
+
+export type VenueQuotesProps = {
+  quotes: CitedText[];
+  /** Opens the reviews behind one quote. Omit to render inert prose. */
+  onCite?: (quote: CitedText) => void;
+  /** Accessible name for the cite action, e.g. `(n) => "Read 5 reviews"`. */
+  citeLabel?: (reviewCount: number) => string;
+  /** Cap on how many render. The digest ships at most three. */
+  limit?: number;
+  className?: string;
+};
+
+export function VenueQuotes({ quotes, onCite, citeLabel, limit, className }: VenueQuotesProps) {
+  const shown = typeof limit === "number" ? quotes.slice(0, limit) : quotes;
+  if (shown.length === 0) return null;
+
+  return (
+    <div className={cn("grid gap-3 lg:grid-cols-2", className)}>
+      {shown.map((quote, index) => {
+        const citations = quote.review_ids?.length ?? 0;
+        const canCite = !!onCite && citations > 0;
+
+        const text = (
+          <blockquote className="border-l-2 border-border pl-3 font-serif text-[13px] italic leading-[1.45] text-muted-foreground">
+            {`“${quote.text}”`}
+          </blockquote>
+        );
+
+        if (!canCite) return <div key={index}>{text}</div>;
+
+        return (
+          <button
+            key={index}
+            type="button"
+            onClick={() => onCite(quote)}
+            aria-label={citeLabel?.(citations)}
+            className="rounded-md text-left transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {text}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/venue-wall.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { UtensilsCrossed } from "lucide-react";
+import { Button } from "./button";
+import { mockPlaces } from "./menu-mocks";
+import { VenueWall } from "./venue-wall";
+
+const hrefs = Object.fromEntries(
+  mockPlaces.map((place) => [place.slug, `/places/${place.slug}`])
+);
+
+const meta: Meta<typeof VenueWall> = {
+  title: "Menu/VenueWall",
+  component: VenueWall,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The catalogue's scale, stated as a row of the venues in it. A closing beat rather than a browse surface: the avatars are named and linked, but the module's job is to make \"we read every menu in the city\" land as something specific. It shows a handful and counts the rest, because a wall long enough to be exhaustive stops reading as places.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof VenueWall>;
+
+export const Default: Story = {
+  args: {
+    places: mockPlaces,
+    hrefs,
+    kicker: "397 MENUS IN CLUJ-NAPOCA, READ IN FULL",
+    kickerIcon: <UtensilsCrossed className="h-3 w-3" />,
+    headline: "Every menu in the city, priced to the portion",
+    body: "45,140 dishes and drinks with what they cost, how big they are, and a mention count on every one of them.",
+    overflowLabel: "+393 more",
+    action: <Button size="sm" variant="secondary">Ask Bruno</Button>,
+  },
+};
+
+/** Avatars only — the wall inside a section that already has a header. */
+export const Bare: Story = {
+  args: { places: mockPlaces, hrefs, overflowLabel: "+393 more" },
+};
+
+/** Inert avatars, for a render with nowhere to navigate. */
+export const Static: Story = {
+  args: {
+    places: mockPlaces,
+    kicker: "397 MENUS READ IN FULL",
+    headline: "Every menu in the city, priced to the portion",
+    overflowLabel: "+393 more",
+  },
+};
+
+export const Mobile: Story = {
+  args: {
+    places: mockPlaces.slice(0, 3),
+    hrefs,
+    kicker: "397 MENUS READ IN FULL",
+    headline: "Every menu in the city, priced to the portion",
+    overflowLabel: "+394 more",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/venue-wall.tsx

@@ -0,0 +1,185 @@
+import { cn } from "../lib/utils";
+import type { MenuLinkProps, MenuLinkComponent } from "./menu-types";
+import type { PlacePreview } from "./place-types";
+
+/**
+ * VenueWall — the catalogue's scale, stated as a row of the venues in it.
+ *
+ * A closing beat rather than a browse surface: the avatars are named and
+ * linked, but the module's job is to make "we read every menu in the city"
+ * land as something specific. It shows a handful and counts the rest, because
+ * a wall long enough to be exhaustive stops reading as places.
+ *
+ * Server-safe.
+ */
+
+/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
+export type VenueWallLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: VenueWallLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type VenueWallProps = {
+  places: PlacePreview[];
+  /** Destination per place, keyed by slug. Without one an avatar is inert. */
+  hrefs?: Record<string, string>;
+  kicker?: string;
+  kickerIcon?: React.ReactNode;
+  headline?: string;
+  body?: string;
+  /** Composed overflow chip, e.g. "+393 more". */
+  overflowLabel?: string;
+  /**
+   * Tiles for the mosaic ground — the same licensed stills the hero uses.
+   * Without them the wall falls back to the flat diagonal texture, which is
+   * the degraded state rather than the design.
+   */
+  tileUrls?: string[];
+  /** The action — pass a rendered link or button. */
+  action?: React.ReactNode;
+  className?: string;
+  linkComponent?: MenuLinkComponent;
+};
+
+export function VenueWall({
+  places,
+  hrefs,
+  kicker,
+  kickerIcon,
+  headline,
+  body,
+  overflowLabel,
+  tileUrls,
+  action,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: VenueWallProps) {
+  return (
+    <div
+      className={cn(
+        "relative flex flex-col gap-4 overflow-hidden rounded-[20px] bg-[oklch(0.21_0.012_55)] p-5 text-white lg:p-8",
+        className
+      )}
+    >
+      {tileUrls?.length ? (
+        <>
+          <div aria-hidden className="absolute inset-0 grid auto-rows-fr grid-cols-4 gap-0.5 lg:grid-cols-6">
+            {Array.from({ length: 18 }, (_, cell) => (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                key={cell}
+                src={tileUrls[cell % tileUrls.length]}
+                alt=""
+                loading="lazy"
+                decoding="async"
+                className="h-full w-full object-cover"
+              />
+            ))}
+          </div>
+          {/* Heavier than the hero's: this block's copy sits over the full
+              width rather than in a left column. */}
+          <div
+            aria-hidden
+            className="absolute inset-0 bg-[oklch(0.16_0.012_55_/_0.9)]"
+          />
+        </>
+      ) : (
+        <div
+          aria-hidden
+          className="absolute inset-0 bg-[repeating-linear-gradient(135deg,oklch(0.6_0.02_55)_0_9px,oklch(0.68_0.016_58)_9px_18px)] opacity-[0.18]"
+        />
+      )}
+
+      <div className="relative z-[1] flex flex-col gap-3">
+        {kicker && (
+          <span className="inline-flex w-max items-center gap-1.5 rounded-full bg-white/15 px-3 py-1.5 text-[11px] font-extrabold tracking-[0.11em]">
+            {kickerIcon}
+            {kicker}
+          </span>
+        )}
+
+        {headline && (
+          <h3 className="max-w-[640px] font-serif text-[28px] font-semibold leading-[1.1] tracking-[-0.025em] lg:text-[40px]">
+            {headline}
+          </h3>
+        )}
+
+        {body && <p className="hidden max-w-[540px] text-sm leading-[1.55] opacity-85 lg:block">{body}</p>}
+      </div>
+
+      {/* Below `lg` the crowd is a stack: the first few faces overlapping, then
+          the count. Eight named chips wrapped over four lines were most of the
+          banner on a phone and said nothing the count does not. */}
+      <div aria-hidden className="relative z-[1] flex items-center gap-3 lg:hidden">
+        <div className="flex">
+          {places.slice(0, 5).map((place, index) => (
+            <span
+              key={place.slug}
+              className={cn(
+                "h-9 w-9 shrink-0 overflow-hidden rounded-full bg-white/20 ring-2 ring-[oklch(0.21_0.012_55)]",
+                index > 0 && "-ml-2.5"
+              )}
+            >
+              {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>
+          ))}
+        </div>
+        {overflowLabel && <span className="text-[13px] font-medium opacity-85">{overflowLabel}</span>}
+      </div>
+
+      <ul className="relative z-[1] hidden flex-wrap items-center gap-2 lg:flex">
+        {places.map((place) => {
+          const avatar = (
+            <>
+              <span className="h-7 w-7 shrink-0 overflow-hidden rounded-full bg-white/20">
+                {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="truncate text-[12.5px] font-medium">{place.name}</span>
+            </>
+          );
+
+          const chipClasses =
+            "inline-flex max-w-[220px] items-center gap-2 rounded-full bg-white/10 py-1 pl-1 pr-3.5 backdrop-blur-[6px]";
+
+          return (
+            <li key={place.slug}>
+              {hrefs?.[place.slug] ? (
+                <LinkComponent
+                  href={hrefs[place.slug]}
+                  className={cn(
+                    chipClasses,
+                    "transition-colors hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60"
+                  )}
+                >
+                  {avatar}
+                </LinkComponent>
+              ) : (
+                <span className={chipClasses}>{avatar}</span>
+              )}
+            </li>
+          );
+        })}
+
+        {overflowLabel && (
+          <li className="inline-flex h-9 items-center rounded-full bg-white/10 px-4 text-[12.5px] opacity-80">
+            {overflowLabel}
+          </li>
+        )}
+      </ul>
+
+      {action && <div className="relative z-[1] mt-1">{action}</div>}
+    </div>
+  );
+}

package/src/components/weekday-theme-banner.stories.tsx

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Calendar, PanelRightOpen } from "lucide-react";
+import { Button } from "./button";
+import { WeekdayThemeBanner, type WeekdayThemeDay } from "./weekday-theme-banner";
+
+const days: WeekdayThemeDay[] = [
+  { code: "MON", name: "Meatless Monday", shortName: "Meatless", count: 84 },
+  { code: "TUE", name: "Taco Tuesday", shortName: "Taco", count: 26 },
+  { code: "WED", name: "Salad Wednesday", shortName: "Salad", count: 132 },
+  { code: "THU", name: "Burger Thursday", shortName: "Burger", count: 186 },
+  { code: "FRI", name: "Pizza Friday", shortName: "Pizza", count: 214 },
+  { code: "SAT", name: "Brunch Saturday", shortName: "Brunch", count: 96 },
+  { code: "SUN", name: "Roast Sunday", shortName: "Roast", count: 41 },
+];
+
+const drinkDays: WeekdayThemeDay[] = [
+  { code: "MON", name: "Mulled Monday", shortName: "Mulled", count: 22 },
+  { code: "TUE", name: "Tap Takeover", shortName: "Tap", count: 41 },
+  { code: "WED", name: "Wine Wednesday", shortName: "Wine", count: 52 },
+  { code: "THU", name: "Spritz Thursday", shortName: "Spritz", count: 64 },
+  { code: "FRI", name: "Negroni Friday", shortName: "Negroni", count: 38 },
+  { code: "SAT", name: "Sour Saturday", shortName: "Sour", count: 29 },
+  { code: "SUN", name: "Slow Coffee Sunday", shortName: "Coffee", count: 34 },
+];
+
+const meta: Meta<typeof WeekdayThemeBanner> = {
+  title: "Menu/WeekdayThemeBanner",
+  component: WeekdayThemeBanner,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The day's editorial theme, with the whole week beside it. Showing all seven is the point: a banner that only says \"it is Burger Thursday\" is an assertion, while one showing Wednesday was salads and Friday is pizza reads as a standing rhythm worth coming back for — and the other six days are the only way to browse to one. `activeDay` is resolved by the CALLER from the reader's clock, because a server in UTC and a reader in Bucharest disagree about the date for two hours a day.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof WeekdayThemeBanner>;
+
+export const Default: Story = {
+  args: {
+    days,
+    activeDay: 3,
+    kicker: "TODAY IS THURSDAY",
+    kickerIcon: <Calendar className="h-3 w-3" />,
+    body: "186 of them across 11 kitchens, from 32 lei. Two do a vegetarian version and four keep the grill on past midnight.",
+    weekLabel: "THE WEEK",
+    action: (
+      <Button size="sm" variant="secondary">
+        <PanelRightOpen className="h-3.5 w-3.5" />
+        See today&apos;s picks
+      </Button>
+    ),
+    actionNote: "Bruno picks nine, ranked on review mentions",
+    dayHref: (day) => `/menu?theme=${day.code.toLowerCase()}`,
+  },
+};
+
+/** The drinks tab, same component. */
+export const DrinksTab: Story = {
+  args: {
+    days: drinkDays,
+    activeDay: 2,
+    kicker: "TODAY IS WEDNESDAY",
+    kickerIcon: <Calendar className="h-3 w-3" />,
+    body: "Fifty-two by the glass across nineteen bars, from 16 lei.",
+    weekLabel: "THE WEEK",
+  },
+};
+
+/** `onDayChange` instead of `dayHref` — the rail selects in place. Needs a client caller. */
+export const Selectable: Story = {
+  args: { days, activeDay: 4, kicker: "TODAY IS FRIDAY", weekLabel: "THE WEEK", onDayChange: () => {} },
+};
+
+/** No counts: themes without a number behind them still read. */
+export const WithoutCounts: Story = {
+  args: {
+    days: days.map(({ count: _count, ...day }) => day),
+    activeDay: 0,
+    kicker: "TODAY IS MONDAY",
+    weekLabel: "THE WEEK",
+  },
+};
+
+export const Mobile: Story = {
+  args: {
+    days,
+    activeDay: 3,
+    kicker: "TODAY IS THURSDAY",
+    kickerIcon: <Calendar className="h-3 w-3" />,
+    body: "186 of them across 11 kitchens, from 32 lei.",
+    weekLabel: "THE WEEK",
+    action: <Button size="sm" variant="secondary">See today&apos;s picks</Button>,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};