@thorprovider/blocks 0.1.0

package/src/blocks/e-commerce/reviews/review-rating-1.tsx

@@ -0,0 +1,178 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { Star, ThumbsUp, MessageCircle, Calendar } from 'lucide-react'
+import { Button } from '../../../ui/button'
+import { ReactionToggle } from '../../shared/reaction-toggle'
+import { Avatar, AvatarFallback, AvatarImage } from '../../../ui/avatar'
+import { Card, CardContent } from '../../../ui/card'
+import { cn } from '../../../lib/utils'
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '../../../ui/pagination'
+import {
+  ReviewRating1ReviewForm,
+  type ReviewRating1ReviewFormData,
+  type ReviewRating1ReviewFormProps,
+} from './review-rating-1-review-form'
+
+export interface ReviewRating1Review {
+  id: number
+  userName: string
+  userAvatar?: string
+  date: string
+  rating: number
+  content: string
+  likes?: number
+  comments?: number
+}
+
+export interface ReviewRating1Props {
+  pageTitle: string
+  pageDescription?: string
+  reviews: ReviewRating1Review[]
+  form?: ReviewRating1ReviewFormProps
+  reviewsPerPage?: number
+  onToggleReviewLike?: (review: ReviewRating1Review, liked: boolean) => void
+  onSubmitReview?: (data: ReviewRating1ReviewFormData) => void
+}
+
+export default function ReviewRating1({
+  pageTitle,
+  pageDescription,
+  reviews,
+  form,
+  reviewsPerPage = 2,
+  onToggleReviewLike,
+  onSubmitReview,
+}: ReviewRating1Props) {
+  const [currentPage, setCurrentPage] = useState(1)
+  const [isLiked, setIsLiked] = useState<Record<number, boolean>>({})
+
+  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, reviews, reviewsPerPage])
+
+  return (
+    <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-8'>
+      <div className='mb-12 text-center'>
+        <h1 className='text-3xl font-bold'>{pageTitle}</h1>
+        {pageDescription ? (
+          <p className='text-muted-foreground mx-auto mt-2 max-w-2xl'>{pageDescription}</p>
+        ) : null}
+      </div>
+
+      <div className='grid grid-cols-1 gap-8 lg:grid-cols-3'>
+        <div className='flex flex-col gap-6 lg:col-span-2'>
+          {currentReviews.map(review => (
+            <Card key={review.id} className='transition-all hover:shadow-md'>
+              <CardContent>
+                <div className='flex items-start justify-between gap-4'>
+                  <div className='flex items-start gap-4'>
+                    <Avatar className='bg-muted size-12'>
+                      <AvatarImage src={review.userAvatar || undefined} alt={`${review.userName}'s avatar`} />
+                      <AvatarFallback>{review.userName.substring(0, 2)}</AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <h3 className='font-medium'>{review.userName}</h3>
+                      <div className='text-muted-foreground mt-1 flex items-center gap-2 text-sm'>
+                        <div className='flex' aria-label={`Rated ${review.rating} out of 5`}>
+                          {Array(5)
+                            .fill(0)
+                            .map((_, i) => (
+                              <Star
+                                key={i}
+                                className={cn(
+                                  'size-4',
+                                  i < review.rating
+                                    ? 'fill-foreground text-foreground'
+                                    : 'text-foreground fill-transparent'
+                                )}
+                              />
+                            ))}
+                        </div>
+                        <span>•</span>
+                        <time
+                          dateTime={new Date(review.date).toISOString().split('T')[0]}
+                          className='flex items-center'
+                        >
+                          <Calendar className='me-1 size-3' />
+                          {review.date}
+                        </time>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <p className='text-muted-foreground mt-4'>{review.content}</p>
+                <div className='mt-4 flex gap-4'>
+                  <Button
+                    variant='ghost'
+                    size='sm'
+                    onClick={() => {
+                      const next = !isLiked[review.id]
+                      setIsLiked(prev => ({ ...prev, [review.id]: next }))
+                      onToggleReviewLike?.(review, next)
+                    }}
+                    className='h-8 px-3 text-xs text-muted-foreground hover:bg-primary/10 hover:text-primary cursor-pointer'
+                    aria-label={`${isLiked[review.id] ? 'Unlike' : 'Like'} this review`}
+                  >
+                    <ReactionToggle active={!!isLiked[review.id]} icon={ThumbsUp} iconClassName='size-4' activeColorClassName='text-primary' />
+                    <span>{(review.likes ?? 0) + (isLiked[review.id] ? 1 : 0)}</span>
+                  </Button>
+                  <Button
+                    variant='ghost'
+                    size='sm'
+                    className='h-8 px-3 text-xs text-muted-foreground hover:bg-primary/10 hover:text-primary cursor-pointer'
+                    aria-label='View comments'
+                  >
+                    <MessageCircle className='size-4' />
+                    <span>{review.comments}</span>
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+          {totalPages > 1 ? (
+            <Pagination className='mt-6'>
+              <PaginationContent>
+                <PaginationItem>
+                  <PaginationPrevious
+                    onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+                    className={currentPage === 1 ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
+                  />
+                </PaginationItem>
+                {Array.from({ length: totalPages }).map((_, i) => (
+                  <PaginationItem key={i}>
+                    <PaginationLink
+                      onClick={() => setCurrentPage(i + 1)}
+                      isActive={currentPage === i + 1}
+                      className='cursor-pointer'
+                    >
+                      {i + 1}
+                    </PaginationLink>
+                  </PaginationItem>
+                ))}
+                <PaginationItem>
+                  <PaginationNext
+                    onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+                    className={currentPage === totalPages ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
+                  />
+                </PaginationItem>
+              </PaginationContent>
+            </Pagination>
+          ) : null}
+        </div>
+
+        {form ? <ReviewRating1ReviewForm form={form} onSubmitReview={onSubmitReview} /> : null}
+      </div>
+    </div>
+  )
+}

package/src/blocks/e-commerce/reviews/review-rating-2.tsx

@@ -0,0 +1,246 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Calendar, MessageCircle, Star, ThumbsUp } from 'lucide-react'
+
+import { cn } from '../../../lib/utils'
+import { Avatar, AvatarFallback, AvatarImage } from '../../../ui/avatar'
+import { Button } from '../../../ui/button'
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  type CarouselApi,
+} from '../../../ui/carousel'
+import { Progress } from '../../../ui/progress'
+import { ProductCard3ReactionToggle } from '../product-list/product-card-3-reaction-toggle'
+
+export interface Review {
+  id: string
+  userName: string
+  userAvatar?: string
+  date: string
+  rating: number
+  content: string
+  likes?: number
+  comments?: number
+}
+
+export interface ReviewRating2Props {
+  reviews: Review[]
+  pageTitle?: string
+  pageDescription?: string
+  averageRating?: number
+  totalReviews?: number
+  ratingDistribution?: Record<string, number>
+  basedOnLabel?: string
+  likesLabel?: string
+  commentsLabel?: string
+  onLike?: (review: Review) => void
+  onComment?: (review: Review) => void
+}
+
+/**
+ * ReviewRating2 — resumen de valoración (media, estrellas y distribución de
+ * notas) junto a un carrusel de reseñas con acciones de "me gusta" y
+ * comentarios. 100% prop-driven: ningún contenido demo embebido.
+ */
+export function ReviewRating2({
+  reviews,
+  pageTitle,
+  pageDescription,
+  averageRating,
+  totalReviews,
+  ratingDistribution,
+  basedOnLabel = 'Basado en {n} reseñas',
+  likesLabel = 'Me gusta',
+  commentsLabel = 'Comentarios',
+  onLike,
+  onComment,
+}: ReviewRating2Props) {
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>()
+  const [current, setCurrent] = useState<number>(0)
+  const [isLiked, setIsLiked] = useState<Record<string, boolean>>({})
+
+  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 = (review: Review) => {
+    setIsLiked(prev => ({ ...prev, [review.id]: !prev[review.id] }))
+    onLike?.(review)
+  }
+
+  const formatNumber = (num: number): string => {
+    return num >= 1000 ? `${(num / 1000).toFixed(1)}k` : num.toString()
+  }
+
+  const distributionEntries = Object.entries(ratingDistribution ?? {})
+  const maxCount = Math.max(0, ...distributionEntries.map(([, count]) => count))
+
+  return (
+    <div className='mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8'>
+      {pageTitle ? (
+        <div className='mb-12 text-center'>
+          <h2 className='mb-3 text-4xl font-bold'>{pageTitle}</h2>
+          {pageDescription ? (
+            <p className='text-muted-foreground mx-auto max-w-2xl'>{pageDescription}</p>
+          ) : null}
+        </div>
+      ) : null}
+
+      {averageRating !== undefined || distributionEntries.length > 0 ? (
+        <div className='mb-12 mt-8 flex flex-col items-center justify-center gap-8 md:flex-row'>
+          {averageRating !== undefined ? (
+            <div className='text-center'>
+              <div className='mb-2 text-6xl font-bold'>{averageRating}</div>
+              <div className='flex justify-center gap-1' aria-label={`${averageRating} de 5 estrellas`}>
+                {Array.from({ length: 5 }).map((_, i) => (
+                  <Star key={i} className={cn('size-5', 'fill-current')} />
+                ))}
+              </div>
+              {totalReviews !== undefined ? (
+                <p className='text-muted-foreground mt-1 text-sm'>
+                  {basedOnLabel.replace('{n}', formatNumber(totalReviews))}
+                </p>
+              ) : null}
+            </div>
+          ) : null}
+
+          {averageRating !== undefined && distributionEntries.length > 0 ? (
+            <div className='bg-border mx-4 hidden h-16 w-px md:block' />
+          ) : null}
+
+          {distributionEntries.length > 0 ? (
+            <div className='flex flex-col gap-1'>
+              {distributionEntries.map(([rating, count]) => {
+                const percentage = maxCount > 0 ? Math.round((count / maxCount) * 100) : 0
+                return (
+                  <div key={rating} className='flex items-center gap-2'>
+                    <div className='flex flex-1 justify-end gap-1' aria-hidden='true'>
+                      {Array.from({ length: Number(rating) }).map((_, i) => (
+                        <Star key={i} className='size-3 fill-current' />
+                      ))}
+                    </div>
+                    <Progress value={percentage} className='h-2 w-32' />
+                    <span className='text-muted-foreground w-8 text-sm'>{percentage}%</span>
+                  </div>
+                )
+              })}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+
+      {reviews.length > 0 ? (
+        <div className='relative mx-auto max-w-4xl'>
+          <Carousel
+            setApi={setCarouselApi}
+            className='w-full'
+            opts={{
+              align: 'start',
+              loop: true,
+            }}
+          >
+            <CarouselContent>
+              {reviews.map(review => (
+                <CarouselItem key={review.id}>
+                  <div className='p-6 sm:p-8'>
+                    <div className='flex flex-col gap-4'>
+                      <div className='flex items-start gap-4'>
+                        <Avatar className='bg-muted size-12'>
+                          <AvatarImage src={review.userAvatar || undefined} alt={review.userName} />
+                          <AvatarFallback>{review.userName.substring(0, 2)}</AvatarFallback>
+                        </Avatar>
+                        <div className='flex-1'>
+                          <h3 className='text-lg font-semibold'>{review.userName}</h3>
+                          <div className='mt-1 flex items-center gap-2'>
+                            <div className='flex gap-0.5' aria-label={`${review.rating} de 5 estrellas`}>
+                              {Array.from({ length: review.rating }).map((_, i) => (
+                                <Star key={i} className='size-4 fill-current' />
+                              ))}
+                            </div>
+                            <span className='text-muted-foreground text-sm'>•</span>
+                            <time className='text-muted-foreground flex items-center text-sm'>
+                              <Calendar className='me-1 size-3.5' />
+                              {review.date}
+                            </time>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div>
+                        <p className='text-muted-foreground'>{review.content}</p>
+                        <div className='mt-4 flex gap-4'>
+                          <Button
+                            variant='ghost'
+                            size='sm'
+                            onClick={onLike ? () => handleLike(review) : undefined}
+                            className="h-8 px-3 text-xs text-muted-foreground hover:bg-primary/10 hover:text-primary cursor-pointer"
+                            aria-label={likesLabel}
+                          >
+                            <ProductCard3ReactionToggle
+                              active={!!isLiked[review.id]}
+                              icon={ThumbsUp}
+                              iconClassName='size-4'
+                              activeColorClassName='text-primary'
+                            />
+                            {formatNumber((review.likes ?? 0) + (isLiked[review.id] ? 1 : 0))}
+                          </Button>
+                          <Button
+                            variant='ghost'
+                            size='sm'
+                            onClick={onComment ? () => onComment(review) : undefined}
+                            className="h-8 px-3 text-xs text-muted-foreground hover:bg-primary/10 hover:text-primary cursor-pointer"
+                            aria-label={commentsLabel}
+                          >
+                            <MessageCircle className='size-4' />
+                            {formatNumber(review.comments ?? 0)}
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <CarouselPrevious />
+            <CarouselNext />
+          </Carousel>
+
+          <div className='flex justify-center gap-2'>
+            {reviews.map((_, i) => (
+              <Button
+                key={i}
+                onClick={() => scrollTo(i)}
+                className={cn(
+                  'mx-1 size-2 cursor-pointer rounded-full p-1 transition-all',
+                  current === i ? 'bg-foreground w-6' : 'bg-muted'
+                )}
+                aria-label={`Ir a la reseña ${i + 1}`}
+                aria-current={current === i ? 'step' : undefined}
+              />
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export default ReviewRating2

package/src/blocks/e-commerce/shopping-carts/shopping-cart-1-spinning-counter.tsx

@@ -0,0 +1,142 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+import { cn } from '../../../lib/utils'
+
+const CELL_SIZE = 20
+const DURATION = 450
+const STAGGER = 60
+const SPINS = 1
+const SPIN_BLUR = 2
+
+const REEL_DIGITS = Array.from({ length: (SPINS + 1) * 10 }, (_, i) => i % 10)
+
+type ShoppingCart1SpinningCounterProps = {
+  value: number
+  decimals?: number
+  prefix?: string
+  className?: string
+  digitClassName?: string
+}
+
+export function ShoppingCart1SpinningCounter({
+  value,
+  decimals = 0,
+  prefix,
+  className,
+  digitClassName,
+}: ShoppingCart1SpinningCounterProps) {
+  const safeValue = Math.max(0, value)
+  const formatted = safeValue.toFixed(decimals)
+  const chars = formatted.split('')
+  const containerRef = useRef<HTMLSpanElement>(null)
+  const isFirstRender = useRef(true)
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const strips = Array.from(container.querySelectorAll<HTMLElement>('[data-reel-strip]'))
+    const timeouts: number[] = []
+
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+    strips.forEach((strip, index) => {
+      const digit = Number(strip.dataset.digit)
+      const delay = (strips.length - 1 - index) * STAGGER
+
+      if (isFirstRender.current || !strip.dataset.initialized || prefersReducedMotion) {
+        strip.style.transition = 'none'
+        strip.style.transform = `translateY(-${digit * CELL_SIZE}px)`
+        strip.style.filter = 'blur(0px)'
+        strip.dataset.initialized = 'true'
+        void strip.offsetHeight
+        return
+      }
+
+      const landingIndex = SPINS * 10 + digit
+      strip.style.transition = `transform ${DURATION}ms cubic-bezier(0.16, 1, 0.3, 1) ${delay}ms, filter ${DURATION}ms ease-out ${delay}ms`
+      strip.style.transform = `translateY(-${landingIndex * CELL_SIZE}px)`
+      strip.style.filter = `blur(${SPIN_BLUR}px)`
+
+      const settleTimeout = window.setTimeout(() => {
+        strip.style.filter = 'blur(0px)'
+      }, delay + 30)
+
+      const resetTimeout = window.setTimeout(() => {
+        strip.style.transition = 'none'
+        strip.style.transform = `translateY(-${digit * CELL_SIZE}px)`
+        void strip.offsetHeight
+      }, delay + DURATION + 30)
+
+      timeouts.push(settleTimeout, resetTimeout)
+    })
+
+    isFirstRender.current = false
+
+    return () => {
+      timeouts.forEach(window.clearTimeout)
+    }
+  }, [formatted])
+
+  return (
+    <span className='relative inline-flex items-center'>
+      <span className='sr-only'>{prefix}{formatted}</span>
+      <span
+        ref={containerRef}
+        className={cn('inline-flex items-center font-[inherit] tabular-nums', className)}
+        style={{ height: CELL_SIZE }}
+        aria-hidden='true'
+      >
+        {prefix ? (
+          <span
+            className={digitClassName}
+            style={{ display: 'inline-flex', alignItems: 'center', height: CELL_SIZE }}
+          >
+            {prefix}
+          </span>
+        ) : null}
+        {chars.map((char, index) => {
+          if (!/\d/.test(char)) {
+            return (
+              <span
+                key={index}
+                className={digitClassName}
+                style={{ display: 'inline-flex', alignItems: 'center', height: CELL_SIZE }}
+              >
+                {char}
+              </span>
+            )
+          }
+
+          return (
+            <span
+              key={index}
+              className='relative inline-block overflow-hidden'
+              style={{
+                height: CELL_SIZE,
+                maskImage: 'linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%)',
+                WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%)',
+              }}
+            >
+              <span data-reel-strip data-digit={char} className='flex flex-col will-change-[transform,filter]'>
+                {REEL_DIGITS.map((cellDigit, cellIndex) => (
+                  <span
+                    key={cellIndex}
+                    className={cn('flex items-center justify-center', digitClassName)}
+                    style={{ height: CELL_SIZE }}
+                  >
+                    {cellDigit}
+                  </span>
+                ))}
+              </span>
+            </span>
+          )
+        })}
+      </span>
+    </span>
+  )
+}
+
+export default ShoppingCart1SpinningCounter