@thorprovider/blocks 0.1.2 → 1.0.0

package/src/blocks/e-commerce/product-overview/product-overview-5-gallery.tsx

@@ -1,59 +0,0 @@
-import { Camera } from 'lucide-react'
-import { Badge } from '../../../ui/badge'
-import { cn } from '../../../lib/utils'
-
-import type { ProductOverview5Product } from './product-overview-5'
-
-export interface ProductOverview5GalleryProps {
-  product: ProductOverview5Product
-  badgeLabel?: string
-  selectedImage: number
-  onSelectImage: (index: number) => void
-  photosLabel?: string
-}
-
-export function ProductOverview5Gallery({
-  product,
-  badgeLabel,
-  selectedImage,
-  onSelectImage,
-  photosLabel = 'fotos',
-}: ProductOverview5GalleryProps) {
-  return (
-    <div>
-      <div className='bg-muted relative aspect-square overflow-hidden rounded-xl'>
-        <img src={product.mainImages[selectedImage] || undefined} alt={product.name} className='size-full object-cover' />
-        {badgeLabel && (
-          <Badge className='px-2.5 py-0.5 font-semibold absolute top-4 left-4'>
-            {badgeLabel}
-          </Badge>
-        )}
-        <div className='absolute right-4 bottom-4 rounded-full bg-black/60 px-3 py-1.5 text-sm text-white backdrop-blur-sm'>
-          <Camera className='mr-1 inline size-4' />
-          {product.mainImages.length} {photosLabel}
-        </div>
-      </div>
-
-      {product.mainImages.length > 1 && (
-        <div className='mt-4 flex gap-3 overflow-x-auto pb-2'>
-          {product.mainImages.map((image, index) => (
-            <button
-              type='button'
-              key={index}
-              onClick={() => onSelectImage(index)}
-              className={cn(
-                'relative aspect-square size-20 flex-shrink-0 cursor-pointer overflow-hidden rounded-lg border-2 transition-all',
-                selectedImage === index ? 'border-primary ring-primary/20 shadow-md ring-2' : 'border-muted hover:border-muted-foreground/50',
-              )}
-              aria-label={`Mostrar imagen ${index + 1} de ${product.name}`}
-            >
-              <img src={image || undefined} alt={`${product.name} ${index + 1}`} className='size-full object-cover' />
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default ProductOverview5Gallery

package/src/blocks/e-commerce/product-overview/product-overview-5.tsx

@@ -1,274 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { Camera, Heart, Info, MessageSquare, Package, Share2, ShoppingCart, Star } from 'lucide-react'
-import { Card, CardContent } from '../../../ui/card'
-import { Button } from '../../../ui/button'
-import { Separator } from '../../../ui/separator'
-import { ReactionToggle } from '../../shared/reaction-toggle'
-import { ProductOverview5Gallery } from './product-overview-5-gallery'
-import { ProductOverview5LightboxTab } from './product-overview-5-lightbox-tab'
-import { ProductOverview5ReviewsTab } from './product-overview-5-reviews-tab'
-import {
-  ProductOverview5Tabs,
-  ProductOverview5TabsContentFade,
-  ProductOverview5TabsIndicator,
-  ProductOverview5TabsList,
-  ProductOverview5TabsTrigger,
-} from './product-overview-5-tabs'
-
-export interface ProductOverview5Review {
-  id: number
-  author: string
-  rating: number
-  comment: string
-  date: string
-  helpful: number
-}
-
-export interface ProductOverview5Product {
-  name: string
-  price: number
-  originalPrice: null | number
-  rating: number
-  reviewCount: number
-  sku: string
-  mainImages: string[]
-  galleryImages: string[]
-  description: string
-  features: string[]
-  specifications: Record<string, string>
-  userReviews: ProductOverview5Review[]
-}
-
-export interface ProductOverview5Props {
-  product: ProductOverview5Product
-  badgeLabel?: string
-  availabilityLabel?: string
-  currencySymbol?: string
-  skuLabel?: string
-  overviewLabel?: string
-  specsLabel?: string
-  featuresLabel?: string
-  specificationsLabel?: string
-  reviewsLabel?: string
-  galleryLabel?: string
-  saveLabel?: string
-  savedLabel?: string
-  shareLabel?: string
-  addToCartLabel?: string
-  basedOnReviewsLabel?: string
-  foundHelpfulLabel?: string
-  ofCounterLabel?: string
-  photosLabel?: string
-  onAddToCart?: (product: ProductOverview5Product) => void
-  onToggleWishlist?: (product: ProductOverview5Product, isWishlisted: boolean) => void
-  onShare?: (product: ProductOverview5Product) => void
-}
-
-function renderStars(rating: number) {
-  return Array.from({ length: 5 }, (_, i) => (
-    <Star key={i} className={`size-4 ${i < Math.floor(rating) ? 'fill-foreground text-foreground' : i < rating ? 'text-foreground' : ''}`} />
-  ))
-}
-
-export default function ProductOverview5({
-  product,
-  badgeLabel = 'Destacado',
-  availabilityLabel = 'Disponible',
-  currencySymbol = '$',
-  skuLabel = 'SKU',
-  overviewLabel = 'Resumen',
-  specsLabel = 'Especificaciones',
-  featuresLabel = 'Características clave',
-  specificationsLabel = 'Especificaciones técnicas',
-  reviewsLabel = 'Reseñas',
-  galleryLabel = 'Galería',
-  saveLabel = 'Guardar',
-  savedLabel = 'Guardado',
-  shareLabel = 'Compartir',
-  addToCartLabel = 'Agregar al carrito',
-  basedOnReviewsLabel = 'Basado en {count} reseñas',
-  foundHelpfulLabel = '{count} personas encontraron esto útil',
-  ofCounterLabel = '{current} de {total}',
-  photosLabel = 'fotos',
-  onAddToCart,
-  onToggleWishlist,
-  onShare,
-}: ProductOverview5Props) {
-  const [selectedImage, setSelectedImage] = useState(0)
-  const [isWishlisted, setIsWishlisted] = useState(false)
-
-  return (
-    <section className='py-12'>
-      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-        <div className='grid gap-12 lg:grid-cols-2'>
-          <ProductOverview5Gallery
-            product={product}
-            badgeLabel={badgeLabel}
-            selectedImage={selectedImage}
-            onSelectImage={setSelectedImage}
-            photosLabel={photosLabel}
-          />
-
-          <div className='flex flex-col gap-8'>
-            <div>
-              <h1 className='text-3xl leading-tight font-bold text-balance'>{product.name}</h1>
-              <div className='mt-4 flex flex-wrap items-center gap-4'>
-                <div className='flex items-center gap-2'>
-                  <div className='flex'>{renderStars(product.rating)}</div>
-                  <span className='text-sm font-medium'>{product.rating}</span>
-                </div>
-                <span className='text-muted-foreground text-sm'>
-                  {product.userReviews.length} {reviewsLabel.toLowerCase()}
-                </span>
-                <Separator orientation='vertical' className='h-4' />
-                <span className='text-muted-foreground text-sm'>
-                  {skuLabel}: {product.sku}
-                </span>
-              </div>
-            </div>
-
-            <div className='flex items-baseline gap-3'>
-              <span className='text-4xl font-bold'>
-                {currencySymbol}
-                {product.price}
-              </span>
-              {product.originalPrice && (
-                <span className='text-muted-foreground text-xl line-through'>
-                  {currencySymbol}
-                  {product.originalPrice}
-                </span>
-              )}
-            </div>
-
-            <div className='inline-flex items-center w-fit gap-2 rounded-full bg-success/10 px-3 py-1.5'>
-              <div className='size-2 rounded-full bg-success' />
-              <span className='text-sm font-medium text-success'>{availabilityLabel}</span>
-            </div>
-
-            <p className='text-muted-foreground leading-relaxed'>{product.description}</p>
-
-            <div className='flex flex-col gap-4'>
-              <Button
-                size='lg'
-                className='h-12 w-full cursor-pointer gap-2'
-                onClick={onAddToCart ? () => onAddToCart(product) : undefined}
-              >
-                <ShoppingCart />
-                {addToCartLabel}
-              </Button>
-              <div className='flex gap-3'>
-                <Button
-                  variant='outline'
-                  size='lg'
-                  className='h-12 flex-1 cursor-pointer gap-2'
-                  aria-pressed={isWishlisted}
-                  onClick={() => {
-                    const next = !isWishlisted
-                    setIsWishlisted(next)
-                    onToggleWishlist?.(product, next)
-                  }}
-                >
-                  <ReactionToggle active={isWishlisted} icon={Heart} activeColorClassName='text-destructive' />
-                  {isWishlisted ? savedLabel : saveLabel}
-                </Button>
-                <Button
-                  variant='outline'
-                  size='lg'
-                  className='h-12 flex-1 cursor-pointer gap-2'
-                  onClick={onShare ? () => onShare(product) : undefined}
-                >
-                  <Share2 />
-                  {shareLabel}
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className='mt-16'>
-          <ProductOverview5Tabs defaultValue='overview' className='w-full'>
-            <ProductOverview5TabsList className='bg-muted/50 relative grid !h-12 w-full grid-cols-4 rounded-xl p-1'>
-              <ProductOverview5TabsIndicator />
-              <ProductOverview5TabsTrigger
-                value='overview'
-                className='z-10 h-10 gap-2 text-sm font-medium data-active:bg-transparent data-active:shadow-none dark:data-active:bg-transparent'
-              >
-                <Info className='size-4 shrink-0' />
-                <span className='hidden sm:inline'>{overviewLabel}</span>
-              </ProductOverview5TabsTrigger>
-              <ProductOverview5TabsTrigger
-                value='specs'
-                className='z-10 h-10 gap-2 text-sm font-medium data-active:bg-transparent data-active:shadow-none dark:data-active:bg-transparent'
-              >
-                <Package className='size-4 shrink-0' />
-                <span className='hidden sm:inline'>{specsLabel}</span>
-              </ProductOverview5TabsTrigger>
-              <ProductOverview5TabsTrigger
-                value='reviews'
-                className='z-10 h-10 gap-2 text-sm font-medium data-active:bg-transparent data-active:shadow-none dark:data-active:bg-transparent'
-              >
-                <MessageSquare className='size-4 shrink-0' />
-                <span className='hidden sm:inline'>
-                  {reviewsLabel} ({product.userReviews.length})
-                </span>
-              </ProductOverview5TabsTrigger>
-              <ProductOverview5TabsTrigger
-                value='gallery'
-                className='z-10 h-10 gap-2 text-sm font-medium data-active:bg-transparent data-active:shadow-none dark:data-active:bg-transparent'
-              >
-                <Camera className='size-4 shrink-0' />
-                <span className='hidden sm:inline'>{galleryLabel}</span>
-              </ProductOverview5TabsTrigger>
-            </ProductOverview5TabsList>
-            <ProductOverview5TabsContentFade value='overview' className='mt-8'>
-              <Card className='border shadow-none'>
-                <CardContent className='p-8 py-0'>
-                  <h3 className='mb-6 text-xl font-semibold text-balance'>{featuresLabel}</h3>
-                  <div className='grid gap-4 sm:grid-cols-2'>
-                    {product.features.map(feature => (
-                      <div key={feature} className='group flex items-center gap-3'>
-                        <div className='bg-primary/20 size-2 rounded-full transition-colors' />
-                        <span className='text-sm'>{feature}</span>
-                      </div>
-                    ))}
-                  </div>
-                </CardContent>
-              </Card>
-            </ProductOverview5TabsContentFade>
-            <ProductOverview5TabsContentFade value='specs' className='mt-8'>
-              <Card className='border shadow-none'>
-                <CardContent className='p-8 py-0'>
-                  <h3 className='mb-6 text-xl font-semibold text-balance'>{specificationsLabel}</h3>
-                  <div className='flex flex-col gap-4'>
-                    {Object.entries(product.specifications).map(([key, value]) => (
-                      <div key={key} className='border-muted grid grid-cols-1 gap-2 border-b py-3 last:border-b-0 md:grid-cols-3 md:gap-4'>
-                        <span className='text-muted-foreground text-sm font-medium'>{key}</span>
-                        <span className='col-span-1 text-sm md:col-span-2'>{value}</span>
-                      </div>
-                    ))}
-                  </div>
-                </CardContent>
-              </Card>
-            </ProductOverview5TabsContentFade>
-            <ProductOverview5TabsContentFade value='reviews' className='mt-8'>
-              <ProductOverview5ReviewsTab
-                product={product}
-                basedOnReviewsLabel={basedOnReviewsLabel}
-                foundHelpfulLabel={foundHelpfulLabel}
-              />
-            </ProductOverview5TabsContentFade>
-            <ProductOverview5TabsContentFade value='gallery' className='mt-8'>
-              <ProductOverview5LightboxTab
-                product={product}
-                galleryLabel={galleryLabel}
-                ofCounterLabel={ofCounterLabel}
-              />
-            </ProductOverview5TabsContentFade>
-          </ProductOverview5Tabs>
-        </div>
-      </div>
-    </section>
-  )
-}

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

@@ -1,142 +0,0 @@
-'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