50:I[707087,["/_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"],"RegistryDependencies"] 51: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"] 52:T163c,import { useId, type ComponentProps } from "react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; type Action = { label: string; href: string }; export type HeroSectionProps = { eyebrow?: string; /** The headline. The part after `emphasis` is set in italic. */ title?: string; emphasis?: string; description?: string; primaryAction?: Action; secondaryAction?: Action; /** Paragraphs shown in the manuscript preview. */ manuscript?: string[]; comment?: { author: string; text: string }; } & ComponentProps<"section">; const pad = (n: number) => String(n).padStart(2, "0"); const DEFAULTS = { eyebrow: "Quire · For long-form writers", title: "Write the long thing.", emphasis: "the long thing.", description: "A quiet editor for books, theses and 40-page specs. Chapters, footnotes and an editor's margin, without a single toolbar in the way.", primaryAction: { label: "Start a manuscript", href: "#" }, secondaryAction: { label: "Read a sample chapter", href: "#" }, manuscript: [ "The harbour had been closed for eleven days when the first letter arrived, and nobody in the village could say who had carried it.", "Ines read it twice at the kitchen table, then folded it into the back of her ledger, between the March accounts and a recipe she had never tried.", "By evening the wind had turned. She could hear the boats knocking against the pier, patient as clocks.", ], comment: { author: "M. Ostrowski, editor", text: "Love this line. Could the ledger come back in chapter four?", }, }; export default function HeroSection({ eyebrow = DEFAULTS.eyebrow, title = DEFAULTS.title, emphasis = DEFAULTS.emphasis, description = DEFAULTS.description, primaryAction = DEFAULTS.primaryAction, secondaryAction = DEFAULTS.secondaryAction, manuscript = DEFAULTS.manuscript, comment = DEFAULTS.comment, className, ...props }: HeroSectionProps) { const headingId = useId(); const split = emphasis && title.endsWith(emphasis) ? title.length - emphasis.length : -1; const words = manuscript.join(" ").split(/\s+/).length; return (

{eyebrow}

{split > 0 ? ( <> {title.slice(0, split)} {title.slice(split)} ) : ( title )}

{description}

{secondaryAction.label}

{/* The manuscript: a page with line numbers and an editor's margin note. */}

Ch. 1 · The Letter Draft 3

{manuscript.map((paragraph, i) => (

{pad(i * 4 + 1)}

{paragraph}

{i === 1 && comment && ( )}

))}

{words} words in this view Saved just now

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@devsloka","registryDependencies":["button"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/blocks/hero-section/hero-section-four.tsx","content":"$52","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]