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:T1b21,'use client' import { useState, useEffect } from 'react' import { Star, ThumbsUp, MessageCircle, Calendar } from 'lucide-react' import { Button } from '@/components/ui/button' import { ReviewRating2ReactionToggle } from './review-rating-2-reaction-toggle' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { Progress } from '@/components/ui/progress' import { cn } from '@/lib/utils' import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, type CarouselApi, } from '@/components/ui/carousel' import { reviews, storeData } from "@/components/data/review-rating-2-data" export function ReviewRating2() { const [carouselApi, setCarouselApi] = useState() const [current, setCurrent] = useState(0) const [isLiked, setIsLiked] = useState>({}) useEffect(() => { if (!carouselApi) return const updateCurrent = () => setCurrent(carouselApi.selectedScrollSnap()) carouselApi.on('select', updateCurrent) return () => { carouselApi.off('select', updateCurrent) } }, [carouselApi]) const scrollTo = (index: number) => { if (carouselApi) { carouselApi.scrollTo(index) } } const handleLike = (reviewId: number) => { setIsLiked(prev => ({ ...prev, [reviewId]: !prev[reviewId], })) } const formatNumber = (num: number): string => { return num >= 1000 ? `${(num / 1000).toFixed(1)}k` : num.toString() } return (

{storeData.pageTitle}

{storeData.pageDescription}

{storeData.averageRating}

{Array.from({ length: 5 }).map((_, i) => ( ))}

Based on {formatNumber(storeData.totalReviews)} reviews

{Object.entries(storeData.ratingDistribution).map(([rating, percentage]) => (

{Array.from({ length: Number(rating) }).map((_, i) => ( ))}

{percentage}%

))}

{/* Carousel Section */}

{reviews.map(review => (

{/* First Row: User Info */}

{review.userName.substring(0, 2)}

{review.userName}

{Array.from({ length: review.rating }).map((_, i) => ( ))}

• {review.date}

{/* Second Row: Review Content and Actions */}

{review.content}

))} {/* Carousel Indicators */}

{reviews.map((_, i) => (

) } export default ReviewRating2 53:T145d,'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 ReviewRating2ReactionToggle({ 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 ReviewRating2ReactionToggle 54:T7bd,export interface Review { id: number userName: string userAvatar: string date: string rating: number content: string likes?: number comments?: number } export interface StoreData { pageTitle: string pageDescription: string averageRating: number totalReviews: number ratingDistribution: Record } export const reviews: Review[] = [ { id: 1, userName: 'Emma Davis', userAvatar: 'https://notion-avatars.netlify.app/api/avatar?preset=female-1', date: '20 Mar, 2024', rating: 5, content: 'The quality of this product is outstanding! It arrived well-packaged and exceeded my expectations. The materials are durable and the design is both functional and stylish. I\'ve received so many compliments already!', likes: 28, comments: 12, }, { id: 2, userName: 'Alex Morgan', userAvatar: 'https://notion-avatars.netlify.app/api/avatar?preset=male-1', date: '18 Mar, 2024', rating: 4, content: 'I was a bit hesitant about the price at first, but after using it for a week, I can confidently say it\'s worth every penny. The only improvement I can think of would be to include more color options. Highly recommend!', likes: 15, comments: 3, }, { id: 3, userName: 'Sarah Chen', userAvatar: 'https://notion-avatars.netlify.app/api/avatar?preset=male-3', date: '15 Mar, 2024', rating: 5, content: 'This product has made such a difference in my daily routine. It\'s easy to use, reliable, and looks great in my home. The customer service was also excellent when I had a question about the settings.', likes: 42, comments: 8, }, ] export const storeData: StoreData = { pageTitle: 'Customer Stories', pageDescription: 'Discover what our community has to say about their experience. Real stories from real users.', averageRating: 4.8, totalReviews: 1482, ratingDistribution: { '5': 75, '4': 20, '3': 5, '2': 5, '1': 5 }, }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":["avatar","button","carousel","progress"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"storage/app/registry-sources/e-commerce/reviews-ratings/review-rating-2/page.tsx","content":"import { ReviewRating2 } from \"@/components/blocks/e-commerce/reviews-ratings/review-rating-2/components/review-rating-2\"\n\nexport default function Page() {\n return (\n
\n
\n \n
\n
\n )\n}\n","type":"registry:page","target":"app/review-rating-2/page.tsx"},{"path":"storage/app/registry-sources/e-commerce/reviews-ratings/review-rating-2/review-rating-2.tsx","content":"$52","type":"registry:component","target":"@components/review-rating-2.tsx"},{"path":"storage/app/registry-sources/e-commerce/reviews-ratings/review-rating-2/review-rating-2-reaction-toggle.tsx","content":"$53","type":"registry:component","target":"@components/review-rating-2-reaction-toggle.tsx"},{"path":"storage/app/registry-sources/e-commerce/reviews-ratings/review-rating-2/review-rating-2-data.ts","content":"$54","type":"registry:lib","target":"@components/data/review-rating-2-data.ts"}],"className":"h-[70svh] min-h-80"}]]}]