@bearmenu/ui 0.8.12 → 0.8.14

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

@@ -1,132 +0,0 @@
-import { cn } from "../lib/utils";
-import type { MenuFamilyTile, MenuLinkComponent, MenuLinkProps } from "./menu-types";
-import { PhotoGround } from "./photo-ground";
-
-/**
- * MenuFamilyTiles — the hub's doorways: every family the city browses by, as
- * a grid of coloured tiles, closed by one tile that opens the whole index.
- *
- * ## A tile, not a card
- *
- * The family card this replaces was a full-width mosaic with chips, a price
- * band and a browse pill — a summary of the family, in a rail the reader had
- * to swipe through one family at a time. The tile is the family's NAME, its
- * venue count and one photograph on the family's hue, two to a row, so seven
- * families and the index fit on one phone screen. The reader is choosing a
- * family here, not learning about one; the summary lives on the page the tile
- * opens.
- *
- * ## The photograph is a polaroid, not a ground
- *
- * One square photograph, tilted, running off the tile's top and right edges
- * — the tile's `overflow-hidden` crops it, so it reads as a print dropped on
- * the tile rather than a thumbnail placed in it — with the name and the count
- * in the bottom-left, under the print's lower edge. Not a ground: white type
- * on a photograph needs a scrim heavy enough to hide the photograph, and the
- * hue is what tells seven tiles apart at a glance. The photograph is the
- * FAMILY's — a plate, a room, a glass — served from the consumer's own origin,
- * never a venue's (a venue on a tile about every venue reads as an
- * endorsement). A family with no photograph gets the same tilted square
- * holding `PhotoGround`'s serif initial, so the silhouette never changes.
- *
- * Every measure on the polaroid is a percentage of the tile, so the tile and
- * the design stay in proportion from a 170px phone cell to a 260px desktop
- * one: 82% of the height, 8% above the top, 4% past the right, 8° over —
- * measured off the design frame.
- *
- * The bottom scrim is mandatory. The honey and terrace hues sit around
- * `oklch(0.6…)`, where white at 14.5px is about 3:1 — under the 4.5:1 the
- * label needs. The scrim takes the label's corner down to where it passes on
- * every hue in the dictionary.
- *
- * Server-safe.
- */
-
-function DefaultLink({ href, ...props }: MenuLinkProps) {
-  return <a href={href} {...props} />;
-}
-
-export type MenuFamilyTilesProps = {
-  tiles: MenuFamilyTile[];
-  /**
-   * The closing tile: the index behind the seven, drawn exactly like them —
-   * its own hue and photograph, `countLabel` as the caption. Only its place in
-   * the grid says it is the index. Omit when there is none.
-   */
-  all?: MenuFamilyTile;
-  linkComponent?: MenuLinkComponent;
-  className?: string;
-};
-
-/**
- * The tile: the design's 16:10, never shorter than two lines of name plus the
- * count need.
- */
-const TILE =
-  "group relative isolate flex aspect-[16/10] min-h-[108px] flex-col justify-end overflow-hidden rounded-2xl bg-muted p-3.5 text-white lg:p-4 " +
-  "transition-[transform,box-shadow] duration-200 hover:-translate-y-0.5 hover:shadow-[var(--shadow-card-hover)] active:translate-y-0 active:scale-[0.99] motion-reduce:transition-none " +
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
-
-/**
- * The polaroid. Same literal family as `PHOTO_GROUND` for the shadow, never a
- * black `rgba` — the shadow is the ground the card family already stands on.
- */
-const POLAROID =
-  "absolute -right-[4%] -top-[8%] z-0 block aspect-square h-[82%] overflow-hidden rounded-[10%] rotate-[8deg] " +
-  "shadow-[0_10px_22px_-6px_oklch(0.16_0.012_55_/_0.65)] transition-transform duration-300 group-hover:rotate-[5deg] motion-reduce:transition-none";
-
-const SCRIM =
-  "after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:z-0 after:h-3/5 after:bg-gradient-to-t after:from-[oklch(0.16_0.012_55_/_0.55)] after:to-transparent after:content-['']";
-
-export function MenuFamilyTiles({
-  tiles,
-  all,
-  linkComponent: LinkComponent = DefaultLink,
-  className,
-}: MenuFamilyTilesProps) {
-  const cells = all ? [...tiles, all] : tiles;
-
-  return (
-    <div className={cn("grid grid-cols-2 gap-3 lg:grid-cols-4 lg:gap-3.5", className)}>
-      {cells.map((tile) => (
-        <LinkComponent
-          key={tile.slug}
-          href={tile.href}
-          className={cn(TILE, SCRIM)}
-          style={tile.gradient ? { backgroundImage: tile.gradient } : undefined}
-        >
-          <span aria-hidden className={POLAROID}>
-            {tile.photoUrl ? (
-              /* Not lazy: the grid sits directly under the hero, and these
-                 photographs are the first thing the reader looks at. */
-              // eslint-disable-next-line @next/next/no-img-element
-              <img
-                src={tile.photoUrl}
-                alt=""
-                decoding="async"
-                className="absolute inset-0 h-full w-full object-cover"
-              />
-            ) : (
-              <PhotoGround
-                photos={[undefined]}
-                initials={tile.label.charAt(0)}
-                mode="stack"
-                glyphClassName="text-[44px]"
-              />
-            )}
-          </span>
-
-          {/* Both lines keep to the left 55%: the polaroid owns the right. */}
-          <span className="relative z-[1] line-clamp-2 max-w-[55%] text-[14.5px] font-extrabold leading-[1.2] tracking-[-0.015em] lg:text-[16px]">
-            {tile.label}
-          </span>
-          {tile.countLabel && (
-            <span className="relative z-[1] mt-0.5 max-w-[55%] truncate text-[12px] font-medium leading-[1.35] tabular-nums text-white/80 lg:text-[13px]">
-              {tile.countLabel}
-            </span>
-          )}
-        </LinkComponent>
-      ))}
-    </div>
-  );
-}