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:T199d,'use client' import { useState, useEffect } from 'react' import { Button } from '@/components/ui/button' import { ProductOverview1ReactionToggle } from './product-overview-1-reaction-toggle' import { cn } from '@/lib/utils' import { Heart, Star } from 'lucide-react' import { Carousel, CarouselContent, CarouselItem, type CarouselApi } from '@/components/ui/carousel' import { type Product, productDetails } from "@/components/data/product-overview-1-data" export function ProductOverview1() { const [selectedImage, setSelectedImage] = useState(0) const [selectedSize, setSelectedSize] = useState(productDetails.sizes[0]) const [selectedColor, setSelectedColor] = useState(productDetails.colors[0]) const [isWishlisted, setIsWishlisted] = useState(false) const [carouselApi, setCarouselApi] = useState() useEffect(() => { if (!carouselApi) return // Set carousel to the selected image carouselApi.scrollTo(selectedImage) // Update selected image when carousel changes const handleSelect = () => { const currentIndex = carouselApi.selectedScrollSnap() setSelectedImage(currentIndex) } carouselApi.on('select', handleSelect) return () => { carouselApi.off('select', handleSelect) } }, [carouselApi, selectedImage]) return (

{/* Product Details */}

{/* Product Info */}

{productDetails.brand} —

{productDetails.name}

{productDetails.description}

{productDetails.currency} {productDetails.price}

{/* Thumbnails */}

{productDetails.images.map((image, index) => (

setSelectedImage(index)} className={cn( 'ring-offset-background size-16 cursor-pointer overflow-hidden rounded-sm ring-offset-2 transition-all lg:size-18', selectedImage === index && 'ring-foreground ring-2', )} > {image.alt}

))}

{/* Main Image */}

{productDetails.images.map(image => ( {image.alt}

))}

{/* Product Attributes */}

{/* Size Selection */}

Sizes

{productDetails.sizes.map(size => ( ))}

{/* Color Selection */}

Color

{productDetails.colors.map(color => (

{/* Reviews */}

Reviews

{[...Array(5)].map((_, i) => ( ))}

{/* Action Buttons */}

) } export default ProductOverview1 53:T1463,'use client' import { useEffect, useRef, useState, type ComponentType } from 'react' import { cn } from '@/lib/utils' const PARTICLE_COUNT = 8 /** * The pop/burst keyframes travel with the component instead of living in the * app's stylesheet, so this file is self-contained: drop it in and the * animation works with no Tailwind config or global CSS to copy over. * Injected once per page, guarded by the marker attribute. */ const STYLE_MARKER = 'data-reaction-toggle-keyframes' const STYLES = ` @keyframes reaction-toggle-pop { 0% { transform: scale(1); } 30% { transform: scale(0.82); } 100% { transform: scale(1); } } @keyframes reaction-toggle-burst { 0% { opacity: 0; transform: translate(0, 0) scale(0.4); } 20% { opacity: 1; transform: translate(calc(var(--rx) * 0.25), calc(var(--ry) * 0.25)) scale(1); } 100% { opacity: 0; transform: translate(var(--rx), var(--ry)) scale(0.6); } } .reaction-toggle-pop { animation: reaction-toggle-pop 350ms cubic-bezier(0.34, 1.96, 0.64, 1); } .reaction-toggle-burst { animation-name: reaction-toggle-burst; animation-timing-function: ease-out; animation-fill-mode: forwards; } @media (prefers-reduced-motion: reduce) { .reaction-toggle-pop, .reaction-toggle-burst { animation: none !important; } } ` function useReactionToggleStyles() { useEffect(() => { if (document.head.querySelector(`[${STYLE_MARKER}]`)) return const style = document.createElement('style') style.setAttribute(STYLE_MARKER, '') style.textContent = STYLES document.head.append(style) }, []) } type ReactionIconProps = { className?: string } type Particle = { rx: number ry: number duration: number delay: number size: number } function buildParticles(): Particle[] { return Array.from({ length: PARTICLE_COUNT }, (_, i) => { const angle = (Math.PI * 2 * i) / PARTICLE_COUNT + (Math.random() - 0.5) * 0.4 const dist = 16 + Math.random() * 10 return { rx: Math.round(Math.cos(angle) * dist * 10) / 10, ry: Math.round(Math.sin(angle) * dist * 10) / 10, duration: Math.round(500 + Math.random() * 200), delay: Math.round(Math.random() * 60), size: Math.round((0.7 + Math.random() * 0.8) * 100) / 100, } }) } type ReactionToggleProps = { /** Whether the reaction is currently active (liked/helpful/etc). */ active: boolean /** Icon component to render, e.g. `Heart` or `ThumbsUp` from lucide-react. */ icon: ComponentType /** Wrapper class - sizing/positioning of the whole control. */ className?: string /** Class applied to the icon itself (e.g. `size-5`). */ iconClassName?: string /** * Tailwind color class (e.g. `text-primary`, `text-destructive`) applied to the * icon and particles while active. Drives `fill-current`/`bg-current`, so it * stays in sync with the design system instead of a hardcoded brand color. */ activeColorClassName?: string } /** * Heart/thumbs-up style reaction control: the icon pops with an overshoot scale * and sprinkles 8 particles outward the moment it becomes active. */ export function ProductOverview1ReactionToggle({ active, icon: Icon, className, iconClassName, activeColorClassName = 'text-primary', }: ReactionToggleProps) { const [isBursting, setIsBursting] = useState(false) const wasActive = useRef(active) const particlesRef = useRef(buildParticles()) useReactionToggleStyles() useEffect(() => { if (active && !wasActive.current) { particlesRef.current = buildParticles() setIsBursting(true) const timeout = setTimeout(() => setIsBursting(false), 700) wasActive.current = active return () => clearTimeout(timeout) } wasActive.current = active }, [active]) return ( {isBursting && ( )} ) } export default ProductOverview1ReactionToggle 54:T61a,export interface Product { id: string brand: string name: string description: string price: number currency: string rating: number images: { id: number src: string alt: string }[] sizes: number[] colors: { name: string value: string }[] } export const productDetails: Product = { id: 'high-tops-black', brand: 'Adidas', name: 'Black technical knit fabric high-tops', description: 'Running sneakers with thin elastic laces.', price: 450, currency: '$', rating: 4, images: [ { id: 1, src: 'https://assets.shadcnstore.com/shadcnstore.com/stock/e-commerce/nike-zig-kinetica-3-front-view-2.800w.e3c867.avif', alt: 'Black technical knit fabric high-tops - View 1', }, { id: 2, src: 'https://assets.shadcnstore.com/shadcnstore.com/stock/e-commerce/nike-zig-kinetica-3-side-view.800w.e023db.avif', alt: 'Black technical knit fabric high-tops - View 2', }, { id: 3, src: 'https://assets.shadcnstore.com/shadcnstore.com/stock/e-commerce/nike-zig-kinetica-3-front-view.800w.75705b.avif', alt: 'Black technical knit fabric high-tops - View 3', }, { id: 4, src: 'https://assets.shadcnstore.com/shadcnstore.com/stock/e-commerce/nike-zig-kinetica-3-back-view.800w.4d3306.avif', alt: 'Black technical knit fabric high-tops - View 4', }, ], sizes: [37, 38, 39, 40, 41], colors: [ { name: 'White', value: '#FFFFFF' }, { name: 'Black', value: '#000000' }, { name: 'Gray', value: '#6B7280' }, ], }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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@shadcnstore","registryDependencies":["button","carousel"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"storage/app/registry-sources/e-commerce/product-overview/product-overview-1/page.tsx","content":"import { ProductOverview1 } from \"@/components/blocks/e-commerce/product-overview/product-overview-1/components/product-overview-1\"\n\nexport default function Page() {\n return (\n
\n
\n \n
\n
\n )\n}\n","type":"registry:page","target":"app/product-overview-1/page.tsx"},{"path":"storage/app/registry-sources/e-commerce/product-overview/product-overview-1/product-overview-1.tsx","content":"$52","type":"registry:component","target":"@components/product-overview-1.tsx"},{"path":"storage/app/registry-sources/e-commerce/product-overview/product-overview-1/product-overview-1-reaction-toggle.tsx","content":"$53","type":"registry:component","target":"@components/product-overview-1-reaction-toggle.tsx"},{"path":"storage/app/registry-sources/e-commerce/product-overview/product-overview-1/product-overview-1-data.ts","content":"$54","type":"registry:lib","target":"@components/data/product-overview-1-data.ts"}],"className":"h-[70svh] min-h-80"}]]}]