4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T26b1,import { useId, type CSSProperties, type ComponentProps } from "react"; import { cn } from "@/lib/utils"; export type MagazineInk = "blue" | "black" | "navy" | "tint"; export type MagazineShape = "half-circle" | "dots" | "bars" | "circle"; type TileBase = { /** Issue number, shown as "No. 14". */ issue: number; /** Small mono label, e.g. "Autumn 2026". */ label: string; title: string; href: string; /** "feature" spans 2×2, "wide" spans 2×1, default is 1×1. */ size?: "feature" | "wide"; }; export type MagazineTile = | (TileBase & { kind: "photo"; image: { src: string; alt: string }; dek?: string }) | (TileBase & { kind: "cover"; ink: MagazineInk; shape?: MagazineShape; numeral?: string }); export type BlogMagazineProps = { eyebrow?: string; title?: string; note?: string; tiles?: MagazineTile[]; /** Override any of the four cover inks. */ inks?: Partial>; } & ComponentProps<"section">; const unsplash = (id: string, w: number) => `https://images.unsplash.com/${id}?w=${w}&q=80&auto=format&fit=crop`; const DEFAULT_INKS: Record = { blue: "#0A6EFF", black: "#0A0A0A", navy: "#0B2A66", tint: "#E8F0FF", }; /** Text colour per ink, chosen for contrast (white on Devsloka blue keeps small labels above 4.5:1). */ const INK_TEXT: Record = { blue: "#FFFFFF", black: "#FFFFFF", navy: "#FFFFFF", tint: "#0A0A0A", }; const DEFAULT_TILES: MagazineTile[] = [ { kind: "photo", size: "feature", issue: 14, label: "Autumn 2026 · 64 pages", title: "The quiet season", dek: "Eleven owners on what they actually do between the last hikers and the first snow. Mostly: fix the boiler.", href: "#", image: { src: unsplash("photo-1506905925346-21bda4d32df4", 1400), alt: "Mountains above the clouds at dawn", }, }, { kind: "cover", ink: "blue", shape: "half-circle", issue: 13, label: "Summer 2026", title: "Full house, empty fridge", href: "#", }, { kind: "photo", issue: 12, label: "Spring 2026", title: "Open until the last guest leaves", href: "#", image: { src: unsplash("photo-1472851294608-062f824d29cc", 800), alt: "An “Open” sign on a shop door" }, }, { kind: "photo", issue: 11, label: "Winter 2025", title: "The spare room economy", href: "#", image: { src: unsplash("photo-1583847268964-b28dc8f51f92", 800), alt: "A cosy living room interior" }, }, { kind: "cover", ink: "black", shape: "dots", issue: 10, label: "Autumn 2025", title: "Fewer rooms, better ones", href: "#", }, { kind: "cover", ink: "navy", size: "wide", numeral: "40", issue: 9, label: "Summer 2025 · The staffing issue", title: "Forty rooms, one desk, no night shift", href: "#", }, { kind: "photo", issue: 8, label: "Spring 2025", title: "Walks the guests found first", href: "#", image: { src: unsplash("photo-1441974231531-c6227db76b6e", 800), alt: "A sunlit forest path" }, }, { kind: "cover", ink: "tint", shape: "bars", issue: 7, label: "Winter 2024", title: "Notes on charging more", href: "#", }, ]; const DEFAULTS = { eyebrow: "Saltbox Quarterly · In print since 2023", title: "A small magazine for people who run small places", note: "Posted free to every Saltbox owner who asks. Back issues while they last.", }; const focusRing = "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"; const SIZE: Record | "default", string> = { feature: "col-span-2 row-span-2", wide: "col-span-2", default: "", }; const pad = (n: number) => String(n).padStart(2, "0"); function Shape({ shape }: { shape: MagazineShape }) { return ( ); } export function BlogMagazine({ eyebrow = DEFAULTS.eyebrow, title = DEFAULTS.title, note = DEFAULTS.note, tiles = DEFAULT_TILES, inks, className, style, ...props }: BlogMagazineProps) { const headingId = useId(); const palette = { ...DEFAULT_INKS, ...inks }; return (

{eyebrow}

{title}

{note}

{tile.kind === "photo" ? ( {/* Plain keeps the block portable outside Next.js. */} {/* eslint-disable-next-line @next/next/no-img-element */}

No. {pad(tile.issue)} {tile.label}

{tile.title}
{tile.dek && tile.size === "feature" && (
{tile.dek}
)}
) : ( {tile.shape && } {tile.numeral && ( {tile.numeral} )}
No. {pad(tile.issue)}

{tile.title}

{tile.label}

)}

); } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"src/registry/blocks/blog/blog-magazine.tsx","content":"$50","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]

{title}

{tile.title}

{tile.title}