@thorprovider/blocks 0.1.0

package/src/blocks/e-commerce/shopping-carts/shopping-cart-2.tsx

@@ -0,0 +1,295 @@
+'use client'
+
+import { useState } from 'react'
+import { ArrowLeft, Shield, ShoppingBag, Tag, Truck } from 'lucide-react'
+import { Button } from '../../../ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
+import { Input } from '../../../ui/input'
+import { Separator } from '../../../ui/separator'
+import { ShoppingCart2ItemRow } from './shopping-cart-2-item-row'
+import { ShoppingCart2Recommendations } from './shopping-cart-2-recommendations'
+import { ShoppingCart2SpinningCounter } from './shopping-cart-2-spinning-counter'
+
+export interface ShoppingCart2Item {
+  id: string
+  name: string
+  brand?: string
+  price: number
+  originalPrice?: number
+  quantity: number
+  image: string
+  color?: string
+  size?: string
+}
+
+export interface ShoppingCart2Recommendation {
+  id: string
+  name: string
+  price: number
+  image: string
+}
+
+export interface ShoppingCart2Props {
+  items: ShoppingCart2Item[]
+  recommendations?: ShoppingCart2Recommendation[]
+  taxRate?: number
+  shippingCost?: number
+  freeShippingThreshold?: number
+  validatePromo?: (code: string) => number | null
+  titleLabel?: string
+  itemsCountLabel?: string
+  cartItemsLabel?: string
+  orderSummaryLabel?: string
+  subtotalLabel?: string
+  savingsLabel?: string
+  shippingLabel?: string
+  freeShippingLabel?: string
+  taxLabel?: string
+  totalLabel?: string
+  promoPlaceholder?: string
+  applyPromoLabel?: string
+  promoAppliedLabel?: string
+  continueShoppingLabel?: string
+  emptyCartTitleLabel?: string
+  emptyCartDescriptionLabel?: string
+  checkoutLabel?: string
+  freeShippingNoteLabel?: string
+  freeShippingThresholdNoteLabel?: string
+  secureCheckoutLabel?: string
+  recommendationsLabel?: string
+  onQuantityChange?: (id: string, quantity: number) => void
+  onRemove?: (id: string) => void
+  onAddToWishlist?: (item: ShoppingCart2Item) => void
+  onCheckout?: () => void
+  onContinueShopping?: () => void
+  onRecommendationClick?: (product: ShoppingCart2Recommendation) => void
+}
+
+export function ShoppingCart2({
+  items,
+  recommendations,
+  taxRate = 0.08,
+  shippingCost = 9.99,
+  freeShippingThreshold = 75,
+  validatePromo,
+  titleLabel = 'Carrito de compras',
+  itemsCountLabel = 'artículos en tu carrito',
+  cartItemsLabel = 'Artículos',
+  orderSummaryLabel = 'Resumen del pedido',
+  subtotalLabel = 'Subtotal',
+  savingsLabel = 'Ahorro',
+  shippingLabel = 'Envío',
+  freeShippingLabel = 'Gratis',
+  taxLabel = 'Impuestos',
+  totalLabel = 'Total',
+  promoPlaceholder = 'Código de descuento',
+  applyPromoLabel = 'Aplicar código',
+  promoAppliedLabel = 'Código "{code}" aplicado',
+  continueShoppingLabel = 'Seguir comprando',
+  emptyCartTitleLabel = 'Tu carrito está vacío',
+  emptyCartDescriptionLabel = 'Añade algunos artículos para empezar',
+  checkoutLabel = 'Finalizar compra',
+  freeShippingNoteLabel = 'Envío gratis en este pedido',
+  freeShippingThresholdNoteLabel = 'Envío gratis en pedidos superiores a ${threshold}',
+  secureCheckoutLabel = 'Pago seguro garantizado',
+  recommendationsLabel = 'También te puede gustar',
+  onQuantityChange,
+  onRemove,
+  onAddToWishlist,
+  onCheckout,
+  onContinueShopping,
+  onRecommendationClick,
+}: ShoppingCart2Props) {
+  const [promoCode, setPromoCode] = useState('')
+  const [appliedPromo, setAppliedPromo] = useState<string | null>(null)
+
+  const applyPromoCode = () => {
+    if (!validatePromo) return
+    const code = promoCode.trim()
+    const discount = validatePromo(code)
+    if (discount !== null && discount > 0) {
+      setAppliedPromo(code)
+      setPromoCode('')
+    }
+  }
+
+  const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0)
+  const itemCount = items.reduce((sum, item) => sum + item.quantity, 0)
+  const savings = items.reduce((sum, item) => {
+    const originalPrice = item.originalPrice ?? item.price
+    return sum + (originalPrice - item.price) * item.quantity
+  }, 0)
+  const promoDiscount = appliedPromo && validatePromo ? subtotal * ((validatePromo(appliedPromo) ?? 0) / 100) : 0
+  const shipping = subtotal > freeShippingThreshold ? 0 : shippingCost
+  const tax = (subtotal - promoDiscount) * taxRate
+  const total = subtotal - promoDiscount + shipping + tax
+
+  const formatPrice = (value: number) => `$${value.toFixed(2)}`
+
+  return (
+    <section className='py-8'>
+      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+        {items.length === 0 ? (
+          <Card>
+            <CardContent className='py-12 text-center'>
+              <ShoppingBag className='text-muted-foreground mx-auto mb-4 size-16' />
+              <h2 className='mb-2 text-2xl font-semibold'>{emptyCartTitleLabel}</h2>
+              <p className='text-muted-foreground mb-6'>{emptyCartDescriptionLabel}</p>
+              <Button size='lg' className='h-10 px-8 cursor-pointer' onClick={onContinueShopping}>
+                {continueShoppingLabel}
+              </Button>
+            </CardContent>
+          </Card>
+        ) : (
+          <>
+            <div className='mb-8'>
+              <Button
+                variant='ghost'
+                size='sm'
+                className='mb-4 h-8 px-3 text-xs cursor-pointer'
+                onClick={onContinueShopping}
+              >
+                <ArrowLeft />
+                {continueShoppingLabel}
+              </Button>
+              <h1 className='text-3xl font-bold tracking-tight text-balance'>{titleLabel}</h1>
+              <p className='text-muted-foreground mt-2'>
+                {items.length} {itemsCountLabel}
+              </p>
+            </div>
+
+            <div className='grid gap-8 lg:grid-cols-3'>
+              <div className='lg:col-span-2'>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>{cartItemsLabel}</CardTitle>
+                  </CardHeader>
+                  <CardContent className='flex flex-col gap-6'>
+                    {items.map((item, index) => (
+                      <ShoppingCart2ItemRow
+                        key={item.id}
+                        item={item}
+                        isLast={index === items.length - 1}
+                        onRemove={onRemove}
+                        onQuantityChange={onQuantityChange}
+                        onAddToWishlist={onAddToWishlist}
+                      />
+                    ))}
+                  </CardContent>
+                </Card>
+              </div>
+
+              <div className='lg:col-span-1'>
+                <Card className='lg:sticky lg:top-6'>
+                  <CardHeader>
+                    <CardTitle>{orderSummaryLabel}</CardTitle>
+                  </CardHeader>
+                  <CardContent className='flex flex-col gap-4'>
+                    <div className='flex flex-col gap-3 text-sm'>
+                      <div className='flex justify-between gap-4 flex-wrap'>
+                        <span className='flex-1'>
+                          {subtotalLabel} ({itemCount} {cartItemsLabel})
+                        </span>
+                        <span className='font-medium shrink-0'>{formatPrice(subtotal)}</span>
+                      </div>
+
+                      {savings > 0 ? (
+                        <div className='flex justify-between gap-4 text-success flex-wrap'>
+                          <span className='flex-1'>{savingsLabel}</span>
+                          <span className='font-medium shrink-0'>-{formatPrice(savings)}</span>
+                        </div>
+                      ) : null}
+
+                      {appliedPromo ? (
+                        <div className='flex justify-between gap-4 text-success flex-wrap'>
+                          <span className='flex-1'>{promoAppliedLabel.replace('{code}', appliedPromo)}</span>
+                          <span className='font-medium shrink-0'>-{formatPrice(promoDiscount)}</span>
+                        </div>
+                      ) : null}
+
+                      <div className='flex justify-between gap-4 flex-wrap'>
+                        <span className='flex-1'>{shippingLabel}</span>
+                        <span className='font-medium shrink-0'>
+                          {shipping === 0 ? freeShippingLabel : formatPrice(shipping)}
+                        </span>
+                      </div>
+
+                      <div className='flex justify-between gap-4 flex-wrap'>
+                        <span className='flex-1'>{taxLabel}</span>
+                        <span className='font-medium shrink-0'>{formatPrice(tax)}</span>
+                      </div>
+                    </div>
+
+                    <Separator />
+
+                    <div className='flex justify-between gap-4 text-lg font-semibold flex-wrap'>
+                      <span>{totalLabel}</span>
+                      <span className='shrink-0'>
+                        <ShoppingCart2SpinningCounter value={total} decimals={2} prefix='$' />
+                      </span>
+                    </div>
+
+                    <div className='flex flex-col gap-3'>
+                      <Input
+                        placeholder={promoPlaceholder}
+                        value={promoCode}
+                        onChange={e => setPromoCode(e.target.value)}
+                        aria-label={promoPlaceholder}
+                        className='h-9 flex-1'
+                      />
+                      <Button
+                        variant='outline'
+                        onClick={applyPromoCode}
+                        className='h-9 cursor-pointer px-4 py-2'
+                        disabled={!promoCode || !validatePromo}
+                        aria-label={applyPromoLabel}
+                      >
+                        <Tag />
+                      </Button>
+                    </div>
+
+                    {appliedPromo ? (
+                      <div className='flex items-center gap-2 text-sm text-success'>
+                        <Tag className='size-4' />
+                        {promoAppliedLabel.replace('{code}', appliedPromo)}
+                      </div>
+                    ) : null}
+
+                    <Button size='lg' className='h-10 w-full px-8 cursor-pointer' onClick={onCheckout}>
+                      {checkoutLabel}
+                    </Button>
+
+                    <div className='flex flex-col gap-3 text-sm'>
+                      <div className='flex items-center gap-2 text-success'>
+                        <Truck className='size-4' />
+                        <span>
+                          {shipping === 0
+                            ? freeShippingNoteLabel
+                            : freeShippingThresholdNoteLabel.replace('${threshold}', String(freeShippingThreshold))}
+                        </span>
+                      </div>
+                      <div className='text-muted-foreground flex items-center gap-2'>
+                        <Shield className='size-4' />
+                        <span>{secureCheckoutLabel}</span>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+            </div>
+
+            {recommendations && recommendations.length > 0 ? (
+              <ShoppingCart2Recommendations
+                recommendations={recommendations}
+                title={recommendationsLabel}
+                onRecommendationClick={onRecommendationClick}
+              />
+            ) : null}
+          </>
+        )}
+      </div>
+    </section>
+  )
+}
+
+export default ShoppingCart2

package/src/blocks/e-commerce/shopping-carts/shopping-cart-3-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 ShoppingCart3SpinningCounterProps = {
+  value: number
+  decimals?: number
+  prefix?: string
+  className?: string
+  digitClassName?: string
+}
+
+export function ShoppingCart3SpinningCounter({
+  value,
+  decimals = 0,
+  prefix,
+  className,
+  digitClassName,
+}: ShoppingCart3SpinningCounterProps) {
+  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 ShoppingCart3SpinningCounter