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:T1fb6,import { buttonVariants } from "@/components/ui/button"; import { cn } from "@/lib/utils"; // Cortexcn item "feature-studio-grid-01", revision 6f5d56b972cf, MIT license. // https://ui.cortexcn.dev/r/v/feature-studio-grid-01/6f5d56b972cf.json interface StudioAction { label: string; href: string; } interface StudioImage { src: string; /** Shown in dark mode instead of `src`, for a logo with a light version. */ srcDark?: string; alt: string; } export interface StudioPost { /** Shown as written, for example "September 18, 2026". */ date: string; title: string; description: string; href: string; image: StudioImage; } export interface StudioFeature { /** Small label in the tile's top corner, such as a brand or series name. */ label: string; title: string; href: string; image: StudioImage; } export interface FeatureStudioGridProps { heading?: string; action?: StudioAction; /** Two compact cards sit beside the feature tile on large screens. */ posts?: StudioPost[]; feature?: StudioFeature; className?: string; } const CORTEXCN_LOGO: StudioImage = { src: "https://www.cortexcn.dev/img/cortexcn/icon-light.png", srcDark: "https://www.cortexcn.dev/img/cortexcn/icon-dark.png", alt: "Cortexcn logo", }; /** Sample photo from Unsplash (free to use under the Unsplash License). */ function unsplash(id: string, width: number) { return `https://images.unsplash.com/photo-${id}?w=${width}&q=80&auto=format&fit=crop`; } const DEFAULT_POSTS: StudioPost[] = [ { date: "September 18, 2026", title: "Motion that knows when to rest", description: "How we pace animation so it guides the eye, and keep it still when a visitor asks for reduced motion.", href: "#", image: CORTEXCN_LOGO, }, { date: "August 29, 2026", title: "One set of tokens for every theme", description: "The shared color tokens that keep charts, cards, and blocks consistent in light and dark mode.", href: "#", image: CORTEXCN_LOGO, }, ]; const DEFAULT_FEATURE: StudioFeature = { label: "Studio", title: "How a component goes from sketch to registry", href: "#", image: { src: unsplash("1581291518857-4e27b48ff24e", 1400), alt: "A hand sketching app wireframes on paper", }, }; function PlusIcon({ className }: { className?: string }) { return ( ); } function ArrowUpRightIcon() { return ( ); } const thumbnailClassName = "size-24 rounded-xl border bg-muted object-cover lg:size-32"; function Thumbnail({ image }: { image: StudioImage }) { if (!image.srcDark) { return ( // biome-ignore lint/performance/noImgElement: framework-agnostic registry block {image.alt}

); } return ( <> {/* biome-ignore lint/performance/noImgElement: framework-agnostic registry block */} {image.alt}

{/* biome-ignore lint/performance/noImgElement: framework-agnostic registry block */}

); } function PostCard({ post }: { post: StudioPost }) { return (

{post.date}

{post.title}

{post.description}

); } function FeatureTile({ feature }: { feature: StudioFeature }) { return ( {/* biome-ignore lint/performance/noImgElement: framework-agnostic registry block */} {feature.image.alt}

{/* Keeps the label readable on light photos. */}

{feature.label}

{feature.title}

); } export function FeatureStudioGrid({ heading = "Stories from the studio.", action = { label: "Get in touch", href: "#" }, posts = DEFAULT_POSTS, feature = DEFAULT_FEATURE, className, }: FeatureStudioGridProps) { return (

{heading}

{action.label}

); } 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":"@cortexcn","registryDependencies":["https://ui.cortexcn.dev/r/utils.json","button"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/blocks/feature-studio-grid-01/components/feature-studio-grid.tsx","content":"$52","type":"registry:component","target":"components/feature-studio-grid.tsx"}],"className":"h-[70svh] min-h-80"}]]}]