@bearmenu/ui 0.8.7 → 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/poster-wall.test.tsx

@@ -0,0 +1,28 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { PosterWall } from "./poster-wall";
+
+const grid = (container: HTMLElement) =>
+  container.querySelector<HTMLElement>("[aria-hidden].grid")!;
+
+describe("PosterWall grid", () => {
+  it("sizes the grid to the tiles and completes the last row by cycling them", () => {
+    const tiles = Array.from({ length: 5 }, (_, i) => ({ src: `p${i}.jpg` }));
+    const { container } = render(
+      <PosterWall tiles={tiles} variant="compact" />,
+    );
+    const g = grid(container);
+    // compact: width 390, height 330 → cols = round(√(5·1.18)) = 2, rows = 3 → 6 slots
+    expect(g.style.gridTemplateColumns).toBe("repeat(2, minmax(0, 1fr))");
+    expect(g.querySelectorAll("img")).toHaveLength(6);
+    expect(g.querySelectorAll("img")[5].getAttribute("src")).toBe("p0.jpg");
+  });
+
+  it("keeps the placeholder grid when there are no pictures", () => {
+    const { container } = render(<PosterWall tiles={[]} variant="compact" />);
+    const g = grid(container);
+    expect(g.style.gridTemplateColumns).toBe("repeat(6, minmax(0, 1fr))");
+    expect(g.children).toHaveLength(36);
+    expect(g.querySelectorAll("img")).toHaveLength(0);
+  });
+});

package/src/components/poster-wall.tsx

@@ -17,6 +17,14 @@ import { Skeleton } from "./skeleton";
  * the container's size, alignment and padding for the given `variant`. All
  * overlay typography belongs to the caller.
  *
+ * THE GRID FOLLOWS THE TILES. It used to be a fixed 12×4 (48) or 6×6 (36)
+ * grid, and a city with 28 posters left twenty empty cells — a dark hole down
+ * one side of the masthead. Now the column count comes from the tile count
+ * and the wall's measured aspect ratio (`cols ≈ √(n · w/h)`, so tiles stay
+ * roughly square), rows follow, and the last row is completed by cycling the
+ * tiles. Fewer pictures means fewer, bigger tiles; never a gap. The default
+ * grid is kept for the server render and for an empty tile list.
+ *
  * The sweep is a genuine `@keyframes` animation (not Framer Motion) because
  * its exact timing is part of the design spec and it needs to keep running
  * indefinitely at zero React cost — the keyframes are scoped to this file via
@@ -43,16 +51,22 @@ function usePrefersReducedMotion(): boolean {
   return reduced;
 }
 
-function useInViewport<T extends Element>(): [React.RefObject<T | null>, boolean] {
+function useInViewport<T extends Element>(): [
+  React.RefObject<T | null>,
+  boolean,
+] {
   const ref = React.useRef<T | null>(null);
   const [inView, setInView] = React.useState(true);
 
   React.useEffect(() => {
     const node = ref.current;
     if (!node || typeof IntersectionObserver === "undefined") return;
-    const observer = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting), {
-      threshold: 0,
-    });
+    const observer = new IntersectionObserver(
+      ([entry]) => setInView(entry.isIntersecting),
+      {
+        threshold: 0,
+      },
+    );
     observer.observe(node);
     return () => observer.disconnect();
   }, []);
@@ -65,7 +79,7 @@ export type PosterWallTile = {
 };
 
 export type PosterWallProps = {
-  /** Background tiles. Desktop renders 48, `compact` renders 36 — shorter arrays are padded with placeholders. */
+  /** Background tiles. The grid sizes itself to how many there are (see above); with none, a placeholder grid renders. */
   tiles?: PosterWallTile[];
   /** `compact` is the bottom-aligned mobile treatment (fewer, larger tiles, a top-fading veil). */
   variant?: "default" | "compact";
@@ -74,22 +88,64 @@ export type PosterWallProps = {
   className?: string;
 };
 
-export function PosterWall({ tiles, variant = "default", children, className }: PosterWallProps) {
+export function PosterWall({
+  tiles,
+  variant = "default",
+  children,
+  className,
+}: PosterWallProps) {
   const isCompact = variant === "compact";
-  const tileCount = isCompact ? POSTER_WALL_COMPACT_TILE_COUNT : POSTER_WALL_DESKTOP_TILE_COUNT;
-  const slots = Array.from({ length: tileCount }, (_, index): PosterWallTile => tiles?.[index] ?? {});
+  const maxCols = isCompact ? 6 : 12;
+  const maxSlots = isCompact
+    ? POSTER_WALL_COMPACT_TILE_COUNT
+    : POSTER_WALL_DESKTOP_TILE_COUNT;
+  const heightPx = isCompact ? 330 : 420;
+  const pictures = React.useMemo(
+    () => (tiles ?? []).filter((tile) => !!tile.src),
+    [tiles],
+  );
 
   const prefersReducedMotion = usePrefersReducedMotion();
   const [wallRef, inView] = useInViewport<HTMLDivElement>();
   const isSweepPaused = prefersReducedMotion || !inView;
 
+  // Measured on the client; the server assumes a phone or a wide desktop
+  // column, which is what those two variants are for.
+  const [width, setWidth] = React.useState(isCompact ? 390 : 1200);
+  React.useEffect(() => {
+    const node = wallRef.current;
+    if (!node || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(([entry]) =>
+      setWidth(entry.contentRect.width),
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [wallRef]);
+
+  let cols = maxCols;
+  let slots: PosterWallTile[];
+  if (pictures.length === 0) {
+    slots = Array.from({ length: maxSlots }, (): PosterWallTile => ({}));
+  } else {
+    const shown = Math.min(pictures.length, maxSlots);
+    cols = Math.min(
+      maxCols,
+      Math.max(2, Math.round(Math.sqrt((shown * width) / heightPx))),
+    );
+    const rows = Math.max(1, Math.ceil(shown / cols));
+    slots = Array.from(
+      { length: cols * rows },
+      (_, index) => pictures[index % pictures.length],
+    );
+  }
+
   return (
     <div
       ref={wallRef}
       className={cn(
         "relative overflow-hidden rounded-[18px] bg-[oklch(0.22_0.012_60)]",
         isCompact ? "h-[330px]" : "h-[420px]",
-        className
+        className,
       )}
     >
       <style>{`
@@ -100,10 +156,8 @@ export function PosterWall({ tiles, variant = "default", children, className }:
       `}</style>
 
       <div
-        className={cn(
-          "absolute inset-0 grid auto-rows-fr gap-[2px] opacity-50",
-          isCompact ? "grid-cols-6" : "grid-cols-12"
-        )}
+        className="absolute inset-0 grid auto-rows-fr gap-[2px] opacity-50"
+        style={{ gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }}
         aria-hidden
       >
         {slots.map((tile, index) =>
@@ -122,7 +176,7 @@ export function PosterWall({ tiles, variant = "default", children, className }:
               key={index}
               className="h-full w-full bg-[repeating-linear-gradient(45deg,color-mix(in_oklch,white_10%,transparent)_0px,color-mix(in_oklch,white_10%,transparent)_2px,transparent_2px,transparent_8px)]"
             />
-          )
+          ),
         )}
       </div>
 
@@ -157,7 +211,9 @@ export function PosterWall({ tiles, variant = "default", children, className }:
       <div
         className={cn(
           "relative flex h-full min-w-0 flex-col text-white",
-          isCompact ? "justify-end gap-[11px] p-5" : "justify-center gap-[15px] px-12"
+          isCompact
+            ? "justify-end gap-[11px] p-5"
+            : "justify-center gap-[15px] px-12",
         )}
       >
         {children}
@@ -173,9 +229,14 @@ export type PosterWallSkeletonProps = {
 };
 
 /** The tile grid at rest — the sweeping light never renders in the loading state. */
-export function PosterWallSkeleton({ variant = "default", className }: PosterWallSkeletonProps) {
+export function PosterWallSkeleton({
+  variant = "default",
+  className,
+}: PosterWallSkeletonProps) {
   const isCompact = variant === "compact";
-  const tileCount = isCompact ? POSTER_WALL_COMPACT_TILE_COUNT : POSTER_WALL_DESKTOP_TILE_COUNT;
+  const tileCount = isCompact
+    ? POSTER_WALL_COMPACT_TILE_COUNT
+    : POSTER_WALL_DESKTOP_TILE_COUNT;
 
   return (
     <div
@@ -183,17 +244,20 @@ export function PosterWallSkeleton({ variant = "default", className }: PosterWal
       className={cn(
         "relative overflow-hidden rounded-[18px] bg-[oklch(0.22_0.012_60)]",
         isCompact ? "h-[330px]" : "h-[420px]",
-        className
+        className,
       )}
     >
       <div
         className={cn(
           "absolute inset-0 grid auto-rows-fr gap-[2px] opacity-50",
-          isCompact ? "grid-cols-6" : "grid-cols-12"
+          isCompact ? "grid-cols-6" : "grid-cols-12",
         )}
       >
         {Array.from({ length: tileCount }, (_, index) => (
-          <Skeleton key={index} className="h-full w-full rounded-none bg-white/10" />
+          <Skeleton
+            key={index}
+            className="h-full w-full rounded-none bg-white/10"
+          />
         ))}
       </div>
 
@@ -209,11 +273,20 @@ export function PosterWallSkeleton({ variant = "default", className }: PosterWal
       <div
         className={cn(
           "relative flex h-full min-w-0 flex-col",
-          isCompact ? "justify-end gap-[11px] p-5" : "justify-center gap-[15px] px-12"
+          isCompact
+            ? "justify-end gap-[11px] p-5"
+            : "justify-center gap-[15px] px-12",
         )}
       >
-        <Skeleton className={cn("bg-white/15", isCompact ? "h-[11px] w-40" : "h-3 w-52")} />
-        <Skeleton className={cn("bg-white/20", isCompact ? "h-7 w-64" : "h-10 w-96")} />
+        <Skeleton
+          className={cn(
+            "bg-white/15",
+            isCompact ? "h-[11px] w-40" : "h-3 w-52",
+          )}
+        />
+        <Skeleton
+          className={cn("bg-white/20", isCompact ? "h-7 w-64" : "h-10 w-96")}
+        />
       </div>
     </div>
   );