61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63:T4f89,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion, type PanInfo } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface PhotoReview { id: string; image: string; /** CSS object-position, to frame the subject. */ focus?: string; /** Zoom into the photo (1 = as is). */ zoom?: number; /** Optional CSS filter, e.g. a warmer phone camera. */ tone?: string; author: string; rating: number; date: string; text: string; verified: boolean; helpful: number; } export interface PhotoReviewGalleryProps { product?: string; photos?: PhotoReview[]; /** Total customer photos, shown in the heading (defaults to photos.length). */ total?: number; onHelpful?: (photo: PhotoReview) => void; onUpload?: (files: File[]) => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", card: "#141414", title: "#FFFFFF", muted: "rgba(255,255,255,0.45)", body: "rgba(255,255,255,0.62)", line: "rgba(255,255,255,0.12)", tile: "#F1F1F1", accent: "#7CDE6A", accentText: "#0B1A08", star: "#F5C451", buttonBg: "#FFFFFF", buttonText: "#111111", ghost: "rgba(255,255,255,0.07)", ring: "rgba(255,255,255,0.55)", scrim: "rgba(0,0,0,0.86)", }, light: { bg: "#FFFFFF", card: "#F7F7F7", title: "#111111", muted: "rgba(0,0,0,0.45)", body: "rgba(0,0,0,0.62)", line: "rgba(0,0,0,0.1)", tile: "#F1F1F1", accent: "#2F9E44", accentText: "#FFFFFF", star: "#E0A100", buttonBg: "#111111", buttonText: "#FFFFFF", ghost: "rgba(0,0,0,0.05)", ring: "rgba(0,0,0,0.45)", scrim: "rgba(10,10,10,0.88)", }, }; const W = "/demo/blocks/product-detail"; const PHOTOS: PhotoReview[] = [ { id: "p1", image: `${W}/watch-2.webp`, author: "Daniel O.", rating: 5, date: "Oct 28", text: "Even nicer in person. The matte case doesn’t show fingerprints at all.", verified: true, helpful: 41 }, { id: "p2", image: `${W}/watch-3.webp`, focus: "50% 40%", zoom: 1.35, tone: "sepia(0.18) saturate(1.1)", author: "Hana M.", rating: 5, date: "Oct 21", text: "Close-up of the dial. The indices catch the light really nicely.", verified: true, helpful: 18 }, { id: "p3", image: `${W}/watch-1.webp`, tone: "brightness(0.96) contrast(1.05)", author: "Chris P.", rating: 4, date: "Oct 19", text: "Strap is stiff for the first week, then it softens up. Size is perfect on a small wrist.", verified: true, helpful: 12 }, { id: "p4", image: `${W}/watch-4.webp`, focus: "50% 30%", zoom: 1.2, author: "Yusuf A.", rating: 5, date: "Oct 12", text: "Wore it to a wedding and got three compliments. Worth it at the sale price.", verified: false, helpful: 9 }, { id: "p5", image: "/demo/minimal-watch.webp", focus: "55% 50%", zoom: 1.6, tone: "hue-rotate(-8deg) saturate(1.15)", author: "Lena R.", rating: 4, date: "Oct 3", text: "Crown is small but easy to set. Wish it came with a second strap.", verified: true, helpful: 7, }, { id: "p6", image: `${W}/watch-2.webp`, focus: "50% 70%", zoom: 1.5, tone: "grayscale(0.2) contrast(1.08)", author: "Tom W.", rating: 5, date: "Sep 26", text: "Buckle detail. Solid, no rattle, the leather smells great.", verified: true, helpful: 5 }, ]; function Stars({ value, color, empty }: { value: number; color: string; empty: string }) { return ( ); } function Photo({ ph, className }: { ph: PhotoReview; className?: string }) { return ( // eslint-disable-next-line @next/next/no-img-element -- plain img keeps the block framework-agnostic {`Photo

); } export function PhotoReviewGallery({ product = "Minimal Watch", photos = PHOTOS, total, onHelpful, onUpload, theme = "dark", className }: PhotoReviewGalleryProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [filter, setFilter] = React.useState<"all" | "five" | "verified">("all"); const [open, setOpen] = React.useState(null); const [dir, setDir] = React.useState(1); const [voted, setVoted] = React.useState([]); const [uploads, setUploads] = React.useState<{ id: string; url: string; name: string }[]>([]); const fileRef = React.useRef(null); const openerRef = React.useRef(null); const dialogRef = React.useRef(null); const list = photos.filter((x) => filter === "all" || (filter === "five" ? x.rating === 5 : x.verified)); const cur = open !== null ? list[open] : null; const count = total ?? photos.length; const go = React.useCallback( (d: number) => { if (open === null) return; setDir(d); setOpen((open + d + list.length) % list.length); }, [open, list.length], ); const close = React.useCallback(() => { setOpen(null); setTimeout(() => openerRef.current?.focus(), 0); }, []); React.useEffect(() => { if (open === null) return; const t = setTimeout(() => dialogRef.current?.querySelector("[data-autofocus]")?.focus(), 40); const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") close(); if (e.key === "ArrowRight") go(1); if (e.key === "ArrowLeft") go(-1); }; window.addEventListener("keydown", onKey); return () => { clearTimeout(t); window.removeEventListener("keydown", onKey); }; }, [open, go, close]); // Free the preview URLs when the block unmounts (single removals free their own). const urlsRef = React.useRef([]); React.useEffect(() => () => urlsRef.current.forEach((u) => URL.revokeObjectURL(u)), []); const show = (i: number, el: HTMLElement) => { openerRef.current = el; setDir(1); setOpen(i); }; const onDrag = (_: unknown, info: PanInfo) => { if (info.offset.x < -60) go(1); else if (info.offset.x > 60) go(-1); }; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const shown = list.slice(0, 5); const more = list.length - shown.length; return (

{product}

Customer photos ({count})

{( [ ["all", "All"], ["five", "5 stars"], ["verified", "Verified"], ] as const ).map(([k, l]) => ( ))}

{ const files = [...(e.target.files ?? [])].slice(0, 4); if (!files.length) return; onUpload?.(files); const added = files.map((f, i) => ({ id: `${f.name}-${i}-${Date.now()}`, url: URL.createObjectURL(f), name: f.name })); urlsRef.current.push(...added.map((a) => a.url)); setUploads((u) => [...u, ...added].slice(-4)); e.target.value = ""; }} />

{/* Mosaic */}

{shown.map((ph, i) => ( ))}

{!list.length && (

No photos match yet.

)} {uploads.length > 0 && (

Your photos · ready to post with your review

{/* eslint-disable-next-line @next/next/no-img-element -- local preview of a picked file */}

)}

{/* Lightbox */} {cur && open !== null && ( e.target === e.currentTarget && close()} > )}

); } 60:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L61",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/new-york/photo-review-gallery/photo-review-gallery.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]