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:T768c,"use client"; import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react"; import { Terminal } from "lucide-react"; import { cn } from "@/lib/utils"; import { AvatarStack, type StackAvatar } from "./AvatarStackBlock"; import { CopyButton } from "./CopyButtonBlock"; import { HalfStars } from "./HalfStarsBlock"; import { ImageWall, type ImageWallProps, type WallItem } from "./ImageWallBlock"; import { TextAnimation } from "./TextAnimationBlock"; // ========================================== // COMPONENT WALL // A landing hero for a component library. On the right, an ImageWall of // screenshots that never ends, its camera gliding from card to card. On the // left, the copy: a small badge, a headline that blurs in word by word (one // word in the primary colour, one that takes turns), a lead, an install // command whose component name follows the card the camera is resting on, // two actions and a line of trust. The tools it is built with — a // TechStack, passed in as `stack` — sit over the lower wall on desktop, // where the wall fills the right side and fades under the copy; on the // stacked layouts the wall is a band under the copy and the tools follow it. // `layout="center"` puts the copy in the middle between two walls — one // camera resting high, the other low — with the tools under the copy. // ========================================== export interface ComponentWallItem extends WallItem { /** * What the install command calls this card — `{item}` in `install.command` * becomes this. Defaults to the title in kebab-case. */ slug?: string; } export interface ComponentWallProps extends Omit, "onFocus">, Pick { /** The small link above the headline. */ badge?: { label: string; href?: string }; /** * The headline, revealed word by word. Write `{word}` where `headingWords` * take turns: `"Build interactive {word}."`. */ heading: string; /** Words that take turns at `{word}`, each blurring in the way the headline did. */ headingWords?: string[]; /** Milliseconds each of `headingWords` stays. */ wordInterval?: number; /** A word of the headline set in the primary colour. */ accent?: string; /** The lead under the headline. Rendered inside a `

`, so pass phrasing content. */ description?: React.ReactNode; /** * The install line. Put `{item}` where the focused card's `slug` goes: * `"npx shadcn@latest add @avara-ui/{item}"`. The whole resolved * command is what the copy button copies. */ install?: { command: string }; primaryAction?: { label: string; href: string; icon?: React.ReactNode }; secondaryAction?: { label: string; href: string; icon?: React.ReactNode }; /** The trust line under the actions: the sentence, the faces and the stars. */ trust?: { text: string; avatars?: StackAvatar[]; rating?: number }; /** The cards on the wall, in reading order down the columns. */ items: ComponentWallItem[]; /** * The tools the library is built with — a `TechStack`. Over the lower wall * on desktop, under the band on smaller screens; in the centred layout it * closes the copy column, where `variant="compact"` (marks only) fits. */ stack?: React.ReactNode; /** * `split`: the copy on the left, the wall on the right. `center`: the copy * in the middle between two walls, the left camera resting high and the * right one low, taking turns; the tools sit under the copy. The walls * split `items`, the first half on the left and the rest on the right. * Below `lg` there is a single wall instead: a band of every card * between the copy and the tools. `center-background`: keeps the walls * anchored in the background layer behind the copy across all screens. */ layout?: "split" | "center" | "center-background"; /** * When true (or with layout="center-background"), the animated screenshot * walls stay in the background layer behind the copy on small screens instead * of dropping below the action buttons as a separate band. */ persistentBackground?: boolean; /** * Whether to show the background/wall image animation on mobile and small screens (

{badge && (

{badge.label}

)} {description && (

{description}

)} {command && (

{command.head} {command.tail} {command.name && ( )} {command.after && {command.after}}

)} {(primaryAction || secondaryAction) && (

{primaryAction && ( {primaryAction.icon} {primaryAction.label} )} {secondaryAction && ( {secondaryAction.icon} {secondaryAction.label} )}

)} {trust && (

{trust.avatars && trust.avatars.length > 0 && ( )}

{typeof trust.rating === "number" && (

{trust.rating.toFixed(1)}

)}

{trust.text}

)} {/* ---- Centred, below `lg`: the one wall, a full-width band between the copy and the tools. It deals every card, being the only wall. The box holds its height from the first paint; the wall mounts once the breakpoint is known, so a desktop never loads it. ---- */} {centered && isMobileWallVisible && !isPersistent && (

{desktop === false && ( )}

)} {/* ---- Centred: the tools close the column, rising after the trust line ---- */} {centered && stack && (

{stack}

)}

); if (centered) { return (

{/* ---- From `lg` (or all screens when persistentBackground is active and mobile wall is enabled): the left wall ---- */} {(desktop || (isPersistent && isMobileWallVisible)) && ( )} {/* ---- The copy, over a soft wash of the background where the walls meet ---- */}

{copy}

{/* ---- From `lg` (or all screens when persistentBackground is active and mobile wall is enabled): the right wall ---- */} {(desktop || (isPersistent && isMobileWallVisible)) && ( )}

); } return (

{/* ---- Copy ---- */}

{copy}

{/* ---- The wall: a band under the copy, or the whole right side fading under it ---- */} {(desktop || isMobileWallVisible) && ( )} {/* ---- The tools, over the lower part of the wall ---- */} {stack && (

{/* On desktop the wall blurs and fades out under the tools: a blur that strengthens towards the bottom, under a wash of the background. On the stacked layouts the tools simply follow the band. */}

{/* On desktop it sits a little way up the wall, in view under the copy — the padding is a share of the strip's width, which is proportional to the wall's height. */}

{stack}

)}

); }, ); ComponentWall.displayName = "ComponentWall"; export default ComponentWall; 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@avara-ui","registryDependencies":["https://avaraui.com/r/avatar-stack.json","https://avaraui.com/r/copy-button.json","https://avaraui.com/r/half-stars.json","https://avaraui.com/r/icons.json","https://avaraui.com/r/image-wall.json","https://avaraui.com/r/tech-stack.json","https://avaraui.com/r/text-animation.json","utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/custom/blocks/ComponentWallBlock.tsx","content":"$52","type":"registry:component","target":"components/custom/blocks/ComponentWallBlock.tsx"}],"className":"h-[70svh] min-h-80"}]]}]