62: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"] 63: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"] 64:T4b1e,"use client"; import * as React from "react"; import { animate, AnimatePresence, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface ViewedProduct { id: string; name: string; price: number; was?: number; image: string; /** Group label, e.g. Today, Yesterday, This week. */ group: string; /** When it was viewed, already formatted (e.g. "12 min ago"). */ viewed: string; badge?: { kind: "drop" | "back" | "low"; label: string }; zoom?: number; } export interface RecentlyViewedProductsProps { items?: ViewedProduct[]; currency?: string; title?: string; onAdd?: (item: ViewedProduct) => void; onRemove?: (item: ViewedProduct) => void; onClear?: () => 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)", lineHi: "rgba(255,255,255,0.35)", tile: "#F1F1F1", accent: "#7CDE6A", accentText: "#0B1A08", amber: "#F5B44A", amberText: "#2A1A00", buttonBg: "#FFFFFF", buttonText: "#111111", ghost: "rgba(255,255,255,0.07)", toast: "#1C1C1C", }, 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)", lineHi: "rgba(0,0,0,0.3)", tile: "#F1F1F1", accent: "#2F9E44", accentText: "#FFFFFF", amber: "#F0A020", amberText: "#2A1A00", buttonBg: "#111111", buttonText: "#FFFFFF", ghost: "rgba(0,0,0,0.05)", toast: "#111111", }, }; type Palette = (typeof PALETTES)["dark"]; const L = "/demo/blocks/product-list"; const ITEMS: ViewedProduct[] = [ { id: "shoes", name: "Running Shoes", price: 99, was: 149, image: "/demo/running-shoes.webp", group: "Today", viewed: "12 min ago", badge: { kind: "drop", label: "Price dropped $50" }, zoom: 1.2 }, { id: "watch", name: "Minimal Watch", price: 79, was: 129, image: "/demo/minimal-watch.webp", group: "Today", viewed: "1 h ago", zoom: 1.5 }, { id: "earbuds", name: "Wireless Earbuds", price: 129, image: "/demo/wireless-earbuds.webp", group: "Today", viewed: "3 h ago", zoom: 1.4 }, { id: "headphones", name: "Headphones", price: 199, image: `${L}/headphones.webp`, group: "Yesterday", viewed: "Yesterday, 21:40", badge: { kind: "back", label: "Back in stock" } }, { id: "bottle", name: "Insulated Bottle", price: 39, image: "/demo/insulated-water-bottle.webp", group: "Yesterday", viewed: "Yesterday, 18:05", zoom: 1.5 }, { id: "backpack", name: "Backpack", price: 89, image: `${L}/backpack.webp`, group: "This week", viewed: "Mon", badge: { kind: "low", label: "Only 3 left" } }, { id: "notebook", name: "Notebook", price: 24, image: "/demo/notebook.webp", group: "This week", viewed: "Mon", zoom: 1.4 }, { id: "lamp", name: "Desk Lamp", price: 59, image: `${L}/lamp.webp`, group: "This week", viewed: "Sun" }, ]; const money = (n: number, c: string) => `${c}${n.toFixed(2)}`; function Badge({ kind, label, p }: { kind: "drop" | "back" | "low"; label: string; p: Palette }) { const style = kind === "drop" ? { background: p.accent, color: p.accentText } : kind === "low" ? { background: p.amber, color: p.amberText } : { background: "#111111", color: "#FFFFFF" }; return ( {kind === "drop" ? ( ) : null} {label} ); } export function RecentlyViewedProducts({ items = ITEMS, currency = "$", title = "Recently viewed", onAdd, onRemove, onClear, theme = "dark", className }: RecentlyViewedProductsProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const [list, setList] = React.useState(items); const [added, setAdded] = React.useState([]); const [toast, setToast] = React.useState<{ id: number; text: string; restore: ViewedProduct[] } | null>(null); const [edge, setEdge] = React.useState({ start: true, end: false }); const scroller = React.useRef(null); const toastTimer = React.useRef | null>(null); const toastSeq = React.useRef(0); const anim = React.useRef<{ stop: () => void } | null>(null); const groups = list.reduce<{ label: string; items: ViewedProduct[] }[]>((acc, it) => { const g = acc.find((x) => x.label === it.group); if (g) g.items.push(it); else acc.push({ label: it.group, items: [it] }); return acc; }, []); const syncEdges = React.useCallback(() => { const el = scroller.current; if (!el) return; setEdge({ start: el.scrollLeft < 4, end: el.scrollLeft + el.clientWidth > el.scrollWidth - 4 }); }, []); React.useEffect(() => { syncEdges(); const el = scroller.current; if (!el) return; const ro = new ResizeObserver(syncEdges); ro.observe(el); return () => ro.disconnect(); }, [syncEdges, list.length]); React.useEffect( () => () => { if (toastTimer.current) clearTimeout(toastTimer.current); anim.current?.stop(); }, [], ); const showToast = (text: string, restore: ViewedProduct[]) => { if (toastTimer.current) clearTimeout(toastTimer.current); toastSeq.current += 1; setToast({ id: toastSeq.current, text, restore }); toastTimer.current = setTimeout(() => setToast(null), 5000); }; const remove = (it: ViewedProduct) => { setList((cur) => cur.filter((x) => x.id !== it.id)); onRemove?.(it); showToast(`Removed ${it.name}`, list); }; const clear = () => { setList([]); onClear?.(); showToast("History cleared", list); }; const undo = () => { if (!toast) return; setList(toast.restore); setToast(null); }; const quickAdd = (it: ViewedProduct) => { setAdded((cur) => (cur.includes(it.id) ? cur : [...cur, it.id])); onAdd?.(it); }; const page = (dir: 1 | -1) => { const el = scroller.current; if (!el) return; const to = Math.max(0, Math.min(el.scrollWidth - el.clientWidth, el.scrollLeft + dir * el.clientWidth * 0.8)); anim.current?.stop(); if (reduce) { el.scrollLeft = to; return; } // Snap fights a programmatic tween, so switch it off while the arrows scroll. el.style.scrollSnapType = "none"; anim.current = animate(el.scrollLeft, to, { duration: 0.55, ease: [0.22, 1, 0.36, 1], onUpdate: (v) => (el.scrollLeft = v), onComplete: () => (el.style.scrollSnapType = "") }); }; const arrow = (dir: 1 | -1, disabled: boolean) => ( ); return (

{title}

{list.length ? `${list.length} product${list.length === 1 ? "" : "s"} from the last 7 days` : "Your browsing history is empty"}

{list.length ? ( ) : null}

{arrow(-1, edge.start || !list.length)} {arrow(1, edge.end || !list.length)}

{list.length ? (

{groups.map((g) => ( {g.items.map((it) => { const isAdded = added.includes(it.id); return (

{/* eslint-disable-next-line @next/next/no-img-element -- plain img keeps the block framework-agnostic */}

{it.badge ? ( ) : null} quickAdd(it)} aria-label={isAdded ? `${it.name} added to cart` : `Add ${it.name} to cart`} whileTap={reduce ? undefined : { scale: 0.9 }} animate={{ background: isAdded ? p.accent : "#FFFFFF", color: isAdded ? p.accentText : "#111111", width: isAdded ? 76 : 32 }} transition={{ type: "spring", stiffness: 420, damping: 30 }} className="absolute right-2 bottom-2 flex h-8 items-center justify-center gap-1 overflow-hidden rounded-full text-[12px] font-semibold whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.18)]" > {isAdded ? ( <> Added ) : ( )}

{it.name}

{money(it.price, currency)} {it.was ? ( {money(it.was, currency)} ) : null}

{it.viewed}

); })} ))}

) : (

Nothing here yet

Products you look at show up here, so you can find them again without searching.

Start browsing )}

{/* Undo toast */}

{toast ? ( {toast.text} ) : null}

); } export default RecentlyViewedProducts; 61:["$","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"}]]}]}]]}],["$","$L62",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"registry/new-york/recently-viewed-products/recently-viewed-products.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]