"use client"; /** * `FeatureSpotlightLayout` — editorial dual-carousel layout for the * cards-and-lists family. * * Anchors an editorial text panel (title + lead + CTA) on one side and a * synced pair of offset carousels on the other. The primary carousel is * the hero slot (single tall card); the secondary follows by `index + 1` * to create the magazine-feature feel of a lead story paired with the * "up next" peek. * * Cross-family by design — the variant is wired into each * `*-carousel.tsx` by passing its family-specific `renderItem` callback * (article card, product card, etc.). The block itself stays CMS-agnostic * (lives under `blocks/`) and knows nothing about the underlying item * shape. * * Behavior: * - Left-anchored text panel (`md:w-1/3`), reversible via `reversed`. * - Two synced Embla carousels; secondary scrolls one ahead of primary. * - Manual prev/next + dot pagination; disabled at boundaries (no loop). * - Empty-state hint for the no-items case. * - RTL-aware arrow rotation (start/end logical props throughout). */ import type { UseEmblaCarouselType } from "embla-carousel-react"; import type { ReactNode } from "react"; import { useCallback, useEffect, useState } from "react"; import { EmptyHint, ListingSectionRoot, } from "@/components/registry/blocks/listing-section"; import AccentLine from "@/components/registry/graphics/icons/accent-line/accent-line"; import { Button } from "@/components/registry/primitives/core/button"; import { Carousel, CarouselContent, CarouselItem, } from "@/components/registry/primitives/core/carousel"; import { LibraryIcon } from "@/components/registry/primitives/core/library-icon"; import { ArrowLink } from "@/components/registry/primitives/editables/arrow-link"; import type { LinkSource } from "@/components/registry/primitives/editables/link"; import { RichText, type RichTextSource, } from "@/components/registry/primitives/editables/richtext"; import { isEmptySource } from "@/components/registry/primitives/editables/source-normalizers"; import { Text, type TextSource, } from "@/components/registry/primitives/editables/text"; import { cn } from "@/lib/registry/cn"; export interface FeatureSpotlightLayoutProps { /** Items to render through the dual carousels. */ items: T[]; /** Stable key for each item — used for React keys in both carousels. */ getKey: (item: T, index: number) => string; /** Renders one slide. Same callback drives the primary and secondary. */ renderItem: (item: T, index: number) => ReactNode; /** Editorial heading content. */ title?: TextSource; /** Supporting copy under the title. */ lead?: TextSource | RichTextSource; /** "Explore" / "View all" CTA shown under the lead. */ cta?: LinkSource; /** Hide the small accent rule under the title. */ hideAccentLine?: boolean; /** Flip the text panel to the end side. */ reversed?: boolean; /** Optional aria label for both carousels (defaults to "Spotlight"). */ ariaLabel?: string; /** Fallback message when `items` is empty. */ emptyStateMessage?: string; /** Pass-through styling hook for the outermost section. */ className?: string; id?: string; /** * Optional family prefix class — e.g. `"articles"`, `"locations"`. * Threaded through to the shared `ListingSectionRoot` so the section * emits `component ` rather than just * `component `. */ entityName?: string; /** `data-slot` for instrumentation. Each consumer sets its own. */ dataSlot?: string; } export function FeatureSpotlightLayout({ items, getKey, renderItem, title, lead, cta, hideAccentLine, reversed = false, ariaLabel = "Spotlight", emptyStateMessage, className, id, entityName, dataSlot, }: FeatureSpotlightLayoutProps) { const [primaryApi, setPrimaryApi] = useState( null, ); const [secondaryApi, setSecondaryApi] = useState< UseEmblaCarouselType[1] | null >(null); const [currentIndex, setCurrentIndex] = useState(0); const itemCount = items.length; const hasItems = itemCount > 0; const multiple = itemCount > 1; const isFirst = currentIndex === 0; const isLast = currentIndex === itemCount - 1; const handleNext = useCallback(() => { if (currentIndex >= itemCount - 1) return; primaryApi?.scrollNext(); secondaryApi?.scrollNext(); }, [primaryApi, secondaryApi, currentIndex, itemCount]); const handlePrev = useCallback(() => { if (currentIndex <= 0) return; primaryApi?.scrollPrev(); secondaryApi?.scrollPrev(); }, [primaryApi, secondaryApi, currentIndex]); const goToSlide = useCallback( (index: number) => { primaryApi?.scrollTo(index); secondaryApi?.scrollTo((index + 1) % Math.max(1, itemCount)); setCurrentIndex(index); }, [primaryApi, secondaryApi, itemCount], ); // Keep currentIndex in lockstep with the primary carousel. useEffect(() => { if (!primaryApi) return; const onSelect = () => setCurrentIndex(primaryApi.selectedScrollSnap()); onSelect(); primaryApi.on("select", onSelect); return () => { primaryApi.off("select", onSelect); }; }, [primaryApi]); // Secondary kicks off one slide ahead on first load. useEffect(() => { if (secondaryApi && itemCount > 1) { secondaryApi.scrollTo(1); } }, [secondaryApi, itemCount]); const titleEmpty = isEmptySource(title); const leadEmpty = isEmptySource(lead); const ctaEmpty = isEmptySource(cta); const flexDirectionClass = reversed ? "md:flex-row-reverse" : "md:flex-row"; const translateClass = multiple ? reversed ? "lg:-translate-x-3" : "lg:translate-x-3" : ""; const gridItemClass = cn( "col-span-1", !multiple ? "lg:col-span-full" : "lg:col-span-1", reversed && "lg:order-2", ); return (

{/* Editorial text panel */}

{!titleEmpty && (

{!hideAccentLine && ( )}

)} {!leadEmpty && (

)} {!ctaEmpty && }

{/* Dual carousel pane */}

{hasItems ? (

{/* Primary (hero) carousel */}

{items.map((item, index) => ( {renderItem(item, index)} ))}

{/* Secondary peek + nav controls */} {multiple && (

{items.map((item, index) => ( {renderItem(item, index)} ))}

{/* Manual nav + dot pagination */}

{items.map((item, index) => (

)}

) : ( Spotlight )}

); } export default FeatureSpotlightLayout;

Feature Spotlight Layout

Showcase

Feature Spotlight Layout