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:T18fc,'use client' import { useMemo, useState } from 'react' import { Star, ThumbsUp, MessageCircle, Calendar } from 'lucide-react' import { Button } from '@/components/ui/button' import { ReviewRating1ReactionToggle } from './review-rating-1-reaction-toggle' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { Card, CardContent } from '@/components/ui/card' import { cn } from '@/lib/utils' import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from '@/components/ui/pagination' import { type Review, reviews, storeData } from "@/components/data/review-rating-1-data" import { ReviewRating1ReviewForm } from './review-rating-1-review-form' export function ReviewRating1() { const [currentPage, setCurrentPage] = useState(1) const [isLiked, setIsLiked] = useState>({}) const reviewsPerPage = 2 // Show only 2 reviews per page // Calculate pagination const totalPages = Math.ceil(reviews.length / reviewsPerPage) const currentReviews = useMemo(() => { const startIndex = (currentPage - 1) * reviewsPerPage const endIndex = startIndex + reviewsPerPage return reviews.slice(startIndex, endIndex) }, [currentPage, reviewsPerPage]) return (

{storeData.pageTitle}

{storeData.pageDescription}

{currentReviews.map(review => (

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

{review.userName}

{Array(5) .fill(0) .map((_, i) => ( ))}

• {review.date}

{review.content}

))} {totalPages > 1 ? ( setCurrentPage(p => Math.max(1, p - 1))} className={currentPage === 1 ? 'pointer-events-none opacity-50' : 'cursor-pointer'} /> {Array.from({ length: totalPages }).map((_, i) => ( setCurrentPage(i + 1)} isActive={currentPage === i + 1} className="cursor-pointer" > {i + 1} ))} setCurrentPage(p => Math.min(totalPages, p + 1))} className={currentPage === totalPages ? 'pointer-events-none opacity-50' : 'cursor-pointer'} /> ) : null}

) } export default ReviewRating1 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 ReviewRating1ReactionToggle({ 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 ReviewRating1ReactionToggle 54:T114c,'use client' import { FormEvent, useState } from 'react' import { Send } from 'lucide-react' import { Star } from 'lucide-react' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { Textarea } from '@/components/ui/textarea' import { cn } from '@/lib/utils' import { type StoreData } from "@/components/data/review-rating-1-data" interface FormState { name: string email: string review: string } export function ReviewRating1ReviewForm({ storeData }: { storeData: StoreData }) { const [isSubmitting, setIsSubmitting] = useState(false) const [rating, setRating] = useState(0) const [hoveredStar, setHoveredStar] = useState(0) const [formData, setFormData] = useState({ name: '', email: '', review: '', }) const handleSubmit = (e: FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate form submission setTimeout(() => { setRating(0) setFormData({ name: '', email: '', review: '' }) setIsSubmitting(false) }, 1000) } return (
{storeData.formTitle} {storeData.formDescription}

{[1, 2, 3, 4, 5].map(star => ( ))}

{storeData.nameLabel} setFormData({ ...formData, name: e.target.value })} placeholder={storeData.namePlaceholder} required aria-required="true" className="h-9" />

{storeData.emailLabel} setFormData({ ...formData, email: e.target.value })} placeholder={storeData.emailPlaceholder} required aria-required="true" className="h-9" />

{storeData.reviewLabel} setFormData({ ...formData, review: e.target.value })} placeholder={storeData.reviewPlaceholder} required aria-required="true" /> </div> <Button type="submit" className="h-9 px-4 py-2 w-full cursor-pointer" disabled={isSubmitting}> {isSubmitting ? storeData.submittingButtonText : storeData.submitButtonText} {!isSubmitting && <Send className="size-4" />} </Button> </form> </CardContent> </Card> </div> ) } export default ReviewRating1ReviewForm 55:Tc43,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 formTitle: string formDescription: string nameLabel: string emailLabel: string reviewLabel: string namePlaceholder: string emailPlaceholder: string reviewPlaceholder: string submitButtonText: string submittingButtonText: string } 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: "I was blown away by the quality of this product. It's clear that a lot of thought and care went into its design. The attention to detail is remarkable, and it's been an absolute pleasure to use. I've already recommended it to several friends who are equally impressed with their purchases.", likes: 8, comments: 2, }, { id: 2, userName: 'Anuj Mishra', userAvatar: 'https://notion-avatars.netlify.app/api/avatar?preset=male-1', date: '16 Dec, 2023', rating: 5, content: "The customer service experience was exceptional from start to finish. When I had questions about my order, the team responded promptly and went above and beyond to ensure I was completely satisfied. It's rare to find such dedication to customer happiness these days.", likes: 10, comments: 5, }, { id: 3, userName: 'Robert Karmazov', userAvatar: 'https://notion-avatars.netlify.app/api/avatar?preset=male-2', date: '24 Oct, 2023', rating: 5, content: "I was hesitant about the price at first, but after using this product for several weeks, I can confidently say it's worth every penny. The quality and durability are outstanding, and it's made a noticeable difference in my daily routine. I'm already planning to purchase more items from this store.", likes: 4, comments: 0, }, { id: 4, userName: 'Sophia Chen', userAvatar: 'https://notion-avatars.netlify.app/api/avatar?preset=female-2', date: '15 May, 2024', rating: 4, content: "This is a fantastic product that has really improved my daily routine. The quality is excellent and it's very user-friendly. The only reason I'm not giving it 5 stars is that I wish it came in more color options. Other than that, it's been a great purchase and I would definitely recommend it to others.", likes: 6, comments: 1, }, ] export const storeData: StoreData = { pageTitle: 'Customer Reviews', pageDescription: 'Read what our customers have to say about their experience with our products and services.', formTitle: 'Submit Your Review', formDescription: 'Share your experience with our community', nameLabel: 'Name', emailLabel: 'Email', reviewLabel: 'Write Your Review', namePlaceholder: 'John Doe', emailPlaceholder: 'mail@example.com', reviewPlaceholder: 'Write here...', submitButtonText: 'Submit Review', submittingButtonText: 'Submitting...', }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","card","input","label","pagination","textarea"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"storage/app/registry-sources/e-commerce/reviews-ratings/review-rating-1/page.tsx","content":"import { ReviewRating1 } from \"@/components/blocks/e-commerce/reviews-ratings/review-rating-1/components/review-rating-1\"\n\nexport default function Page() {\n return (\n <div className=\"flex min-h-svh w-full items-center justify-center\">\n <div className=\"w-full\">\n <ReviewRating1 />\n </div>\n </div>\n )\n}\n","type":"registry:page","target":"app/review-rating-1/page.tsx"},{"path":"storage/app/registry-sources/e-commerce/reviews-ratings/review-rating-1/review-rating-1.tsx","content":"$52","type":"registry:component","target":"@components/review-rating-1.tsx"},{"path":"storage/app/registry-sources/e-commerce/reviews-ratings/review-rating-1/review-rating-1-reaction-toggle.tsx","content":"$53","type":"registry:component","target":"@components/review-rating-1-reaction-toggle.tsx"},{"path":"storage/app/registry-sources/e-commerce/reviews-ratings/review-rating-1/review-rating-1-review-form.tsx","content":"$54","type":"registry:component","target":"@components/review-rating-1-review-form.tsx"},{"path":"storage/app/registry-sources/e-commerce/reviews-ratings/review-rating-1/review-rating-1-data.ts","content":"$55","type":"registry:lib","target":"@components/data/review-rating-1-data.ts"}],"className":"h-[70svh] min-h-80"}]]}] </article></body></html>