{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "lookbook-strip", "title": "Lookbook Strip", "author": "ecomcn ", "description": "A campaign photo you can shop: numbered hairline-ring hotspots, placed by percentage with their own positions for a mobile crop, each opening its product on your shadcn Popover — on hover with a pointer, on tap or Enter otherwise. The card grows out of the hotspot and folds back into it, held open until the fold has played (Motion; a fade under reduced motion). The same products are listed under the image, and hovering one marks its hotspot.", "dependencies": [ "motion", "lucide-react" ], "registryDependencies": [ "popover" ], "files": [ { "path": "src/registry/ecomcn/lookbook-strip/lookbook-strip.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowUpRight } from \"lucide-react\"\nimport { MotionConfig, motion, useReducedMotion } from \"motion/react\"\n\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\"\nimport { cn } from \"@/lib/utils\"\n\n/*\n * A campaign photo you can shop: numbered hotspots on the image, each\n * opening the product it points at, and the same products listed under it.\n *\n * }\n * mobileImage={\"…\"}\n * hotspots={[{ id: \"coat\", x: 38, y: 42, mobile: { x: 52, y: 30 }, product }]}\n * />\n *\n * Hotspots are hairline rings, not filled dots — they read as annotation.\n * Positions are percentages of the image, so they hold at any width; a\n * phone usually gets a different crop, so each hotspot can carry its own\n * `mobile` position for `mobileImage`. A hotspot opens on hover with a\n * pointer, and on tap or Enter otherwise; the card grows out of the\n * hotspot and folds back into it (Motion; a fade under reduced motion),\n * kept open until the fold has played. Hovering a product in the list\n * marks its hotspot. Your shadcn Popover does the positioning and focus.\n */\n\nexport interface LookbookProduct {\n name: string\n href: string\n /** Major units: 420 for $420. */\n price: number\n /** Was-price; struck through when higher. */\n compareAt?: number\n brand?: string\n /** Already rendered — a thumbnail for the card. */\n image?: React.ReactNode\n}\n\nexport interface LookbookHotspot {\n id: string\n /** Percent from the left of `image`, 0–100. */\n x: number\n /** Percent from the top of `image`, 0–100. */\n y: number\n /** Where it sits on `mobileImage`, whose crop differs. Defaults to x / y. */\n mobile?: { x: number; y: number }\n product: LookbookProduct\n}\n\n/** The same settle curve as the other ecomcn morphs: no bounce, an editorial ease. */\nconst MORPH = { duration: 0.45, ease: [0.2, 0, 0, 1] } as const\n\nconst subscribeNothing = () => () => {}\n\nexport interface LookbookStripProps extends Omit, \"title\"> {\n /** Already rendered; it fills the strip. */\n image: React.ReactNode\n /** A different crop for phones (below md). Give it `loading=\"lazy\"` so only one loads. */\n mobileImage?: React.ReactNode\n hotspots: LookbookHotspot[]\n title?: React.ReactNode\n /** The strip's shape from md up. Defaults to \"16 / 7\". */\n aspectRatio?: string\n /** On a phone. Defaults to \"4 / 5\". */\n mobileAspectRatio?: string\n currency?: string\n /** `undefined` follows the visitor's locale, once hydrated. */\n locale?: string\n /** Lists the products under the image. Defaults to true. */\n showList?: boolean\n}\n\nexport function LookbookStrip({\n image,\n mobileImage,\n hotspots,\n title,\n aspectRatio = \"16 / 7\",\n mobileAspectRatio = \"4 / 5\",\n currency = \"USD\",\n locale: localeProp,\n showList = true,\n className,\n ...props\n}: LookbookStripProps) {\n const hydrated = React.useSyncExternalStore(subscribeNothing, () => true, () => false)\n const locale = localeProp ?? (hydrated ? undefined : \"en-US\")\n const money = React.useMemo(() => new Intl.NumberFormat(locale, { style: \"currency\", currency }), [locale, currency])\n const headingId = React.useId()\n const [marked, setMarked] = React.useState(null)\n\n return (\n \n \n {title ? (\n

\n {title}\n

\n ) : null}\n\n \n
img]:size-full [&>img]:object-cover\", mobileImage && \"max-md:hidden\")}>{image}
\n {mobileImage ?
img]:size-full [&>img]:object-cover\">{mobileImage}
: null}\n\n {hotspots.map((spot, i) => (\n \n ))}\n \n\n {showList ? (\n
    \n {hotspots.map((spot, i) => (\n
  1. \n setMarked(spot.id)}\n onPointerLeave={() => setMarked(null)}\n onFocus={() => setMarked(spot.id)}\n onBlur={() => setMarked(null)}\n className=\"group flex items-baseline gap-3 px-4 py-3.5 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset\"\n >\n {String(i + 1).padStart(2, \"0\")}\n \n {spot.product.name}\n {spot.product.brand ? {spot.product.brand} : null}\n \n \n \n
    2. \n ))}\n
\n ) : null}\n \n \n )\n}\n\nfunction Price({ product, money }: { product: LookbookProduct; money: Intl.NumberFormat }) {\n const sale = product.compareAt !== undefined && product.compareAt > product.price\n return (\n \n {money.format(product.price)}\n {sale ? (\n \n was \n {money.format(product.compareAt!)}\n \n ) : null}\n \n )\n}\n\n/** One ring on the photo, and the card it opens. */\nfunction Hotspot({\n spot,\n index,\n money,\n marked,\n}: {\n spot: LookbookHotspot\n index: number\n money: Intl.NumberFormat\n marked: boolean\n}) {\n const reduce = useReducedMotion()\n // `open` is what was asked for; `mounted` keeps the Popover open until\n // the fold back into the hotspot has played.\n const [open, setOpen] = React.useState(false)\n const [mounted, setMounted] = React.useState(false)\n if (open && !mounted) setMounted(true)\n const timer = React.useRef(0)\n React.useEffect(() => () => window.clearTimeout(timer.current), [])\n\n const show = () => {\n window.clearTimeout(timer.current)\n setOpen(true)\n }\n // A short grace, so the pointer can cross from the ring to the card.\n const hideSoon = () => {\n window.clearTimeout(timer.current)\n timer.current = window.setTimeout(() => setOpen(false), 160)\n }\n // Hover is for a mouse; touch and pens open it with a tap, through the Popover.\n const onPointerEnter = (event: React.PointerEvent) => {\n if (event.pointerType === \"mouse\") show()\n }\n const onPointerLeave = (event: React.PointerEvent) => {\n if (event.pointerType === \"mouse\") hideSoon()\n }\n\n const at = spot.mobile ?? spot\n const position = {\n \"--hx\": `${spot.x}%`,\n \"--hy\": `${spot.y}%`,\n \"--mx\": `${at.x}%`,\n \"--my\": `${at.y}%`,\n } as React.CSSProperties\n const sale = spot.product.compareAt !== undefined && spot.product.compareAt > spot.product.price\n\n return (\n (next ? show() : setOpen(false))}>\n \n {/* The hairline ring, with the number it shares with the list. */}\n \n {index + 1}\n \n \n \n \n {\n if (!open) setMounted(false)\n }}\n // Grow from the side the hotspot is on: both bases set an origin variable.\n style={{ transformOrigin: \"var(--radix-popover-content-transform-origin, var(--transform-origin, center bottom))\" }}\n className=\"flex w-64 gap-3 border bg-popover p-3 text-popover-foreground shadow-lg\"\n >\n {spot.product.image ? (\n img]:size-full [&>img]:object-cover\">\n {spot.product.image}\n \n ) : null}\n \n {spot.product.brand ? (\n {spot.product.brand}\n ) : null}\n {spot.product.name}\n \n \n View product \n \n \n \n \n \n )\n}\n", "type": "registry:component", "target": "components/ecomcn/lookbook-strip.tsx" } ], "categories": [ "ecommerce", "marketing" ], "type": "registry:block" }