@thorprovider/blocks 0.1.3 → 2.0.0

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

@@ -1,272 +0,0 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-import { Button } from '../../../ui/button'
-import { cn } from '../../../lib/utils'
-import { Heart, ShoppingBag, Truck, Star, Check } from 'lucide-react'
-import { Carousel, CarouselContent, CarouselItem, type CarouselApi } from '../../../ui/carousel'
-import { ReactionToggle } from '../../shared/reaction-toggle'
-
-export interface ProductOverview2ProductImage {
-  src: string
-  alt: string
-}
-
-export interface ProductOverview2ProductColor {
-  name: string
-  value: string
-}
-
-export interface ProductOverview2ProductSize {
-  eu: number
-  uk: number
-  us: number
-}
-
-export interface ProductOverview2Product {
-  id: string
-  brand: string
-  name: string
-  sku: string
-  price: number
-  currency: string
-  rating: number
-  reviews: number
-  images: ProductOverview2ProductImage[]
-  sizes: ProductOverview2ProductSize[]
-  colors: ProductOverview2ProductColor[]
-}
-
-export interface ProductOverview2Props {
-  product: ProductOverview2Product
-  sizesLabel?: string
-  colorLabel?: string
-  reviewsLabel?: string
-  addToCartLabel?: string
-  removeFromWishlistLabel?: string
-  addToWishlistLabel?: string
-  sizeGuideLabel?: string
-  freeDeliveryLabel?: string
-  onAddToCart?: (product: ProductOverview2Product) => void
-  onToggleWishlist?: (product: ProductOverview2Product, isWishlisted: boolean) => void
-}
-
-export default function ProductOverview2({
-  product,
-  sizesLabel = 'Tallas',
-  colorLabel = 'Color',
-  reviewsLabel = 'Reseñas',
-  addToCartLabel = 'Agregar al carrito',
-  removeFromWishlistLabel = 'Quitar de favoritos',
-  addToWishlistLabel = 'Agregar a favoritos',
-  sizeGuideLabel = 'Guía de tallas',
-  freeDeliveryLabel = 'Envío gratis en pedidos superiores a $30.00',
-  onAddToCart,
-  onToggleWishlist,
-}: ProductOverview2Props) {
-  const [selectedImage, setSelectedImage] = useState(0)
-  const [selectedSize, setSelectedSize] = useState<number | null>(product.sizes[1]?.eu ?? null)
-  const [selectedColor, setSelectedColor] = useState(product.colors[0])
-  const [isWishlisted, setIsWishlisted] = useState(false)
-  const [sizeType, setSizeType] = useState<'eu' | 'uk' | 'us'>('eu')
-  const [carouselApi, setCarouselApi] = useState<CarouselApi>()
-
-  useEffect(() => {
-    if (!carouselApi) return
-
-    // Set carousel to the selected image
-    carouselApi.scrollTo(selectedImage)
-
-    // Update selected image when carousel changes
-    const handleSelect = () => {
-      const currentIndex = carouselApi.selectedScrollSnap()
-      setSelectedImage(currentIndex)
-    }
-
-    carouselApi.on('select', handleSelect)
-    return () => {
-      carouselApi.off('select', handleSelect)
-    }
-  }, [carouselApi, selectedImage])
-
-  return (
-    <section className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-      <div className='grid grid-cols-1 gap-8 py-4 md:py-6 lg:grid-cols-2 lg:py-12'>
-        {/* Product Gallery */}
-        <div className='flex flex-col gap-4'>
-          {/* Main Image - Carousel */}
-          <Carousel setApi={setCarouselApi} className='w-full'>
-            <CarouselContent>
-              {product.images.map((image, index) => (
-                <CarouselItem key={index}>
-                  <div className='flex h-130 w-full items-center justify-center overflow-hidden rounded-lg bg-muted'>
-                    <img src={image.src || undefined} alt={image.alt} className='h-full w-full object-cover' />
-                  </div>
-                </CarouselItem>
-              ))}
-            </CarouselContent>
-          </Carousel>
-
-          {/* Thumbnails */}
-          <div className='flex flex-wrap gap-4'>
-            {product.images.map((image, index) => (
-              <button
-                type='button'
-                key={index}
-                onClick={() => setSelectedImage(index)}
-                aria-label={`Mostrar imagen ${index + 1} de ${product.name}`}
-                className='aspect-square size-16 cursor-pointer'
-              >
-                <img
-                  src={image.src || undefined}
-                  alt={image.alt}
-                  className={cn(
-                    'size-full cursor-pointer rounded-md object-cover ring-offset-2 transition-all',
-                    selectedImage === index ? 'ring-foreground ring-2' : '',
-                  )}
-                />
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Product Details */}
-        <div className='flex flex-col gap-6'>
-          {/* Product Header */}
-          <header className='flex flex-col gap-4'>
-            <div className='flex items-center'>
-              <Button variant='ghost' size='icon' className='bg-primary size-6 scale-75 cursor-pointer rounded-full'>
-                <Check className='text-primary-foreground size-4' />
-              </Button>
-              <span className='ms-2 font-medium'>{product.brand}</span>
-              <span className='text-muted-foreground ms-auto'>{product.sku}</span>
-            </div>
-            <h1 className='text-xl font-bold text-balance xl:text-3xl'>{product.name}</h1>
-
-            {/* Ratings */}
-            <div className='flex items-center gap-2'>
-              <div className='flex'>
-                {[...Array(5)].map((_, i) => (
-                  <Star
-                    key={i}
-                    className={cn(
-                      'size-5',
-                      i < product.rating ? 'fill-foreground text-foreground' : 'text-muted-foreground',
-                    )}
-                  />
-                ))}
-              </div>
-              <span className='text-muted-foreground text-sm'>
-                {product.reviews} {reviewsLabel}
-              </span>
-            </div>
-          </header>
-
-          {/* Price */}
-          <p className='text-4xl font-bold'>
-            {product.currency}
-            {product.price.toFixed(2)}
-          </p>
-          {/* Color Selection */}
-          <div>
-            <div className='mb-4 flex items-center text-sm'>
-              <span className='font-medium'>{colorLabel}:</span>
-              <span className='text-muted-foreground ms-1'>{selectedColor.name}</span>
-            </div>
-            <div className='flex gap-3'>
-              {product.colors.map(color => (
-                <Button
-                  key={color.name}
-                  onClick={() => setSelectedColor(color)}
-                  className={cn(
-                    'h-9 px-4 py-2',
-                    'ring-offset-background size-8 cursor-pointer rounded-sm ring-offset-2 transition-all',
-                    selectedColor.name === color.name && 'ring-foreground ring-2',
-                    selectedColor.name !== color.name &&
-                      ['Black', 'White'].includes(color.name) &&
-                      'outline-muted outline-solid',
-                  )}
-                  style={{ backgroundColor: color.value }}
-                  aria-label={`Seleccionar color ${color.name}`}
-                  aria-selected={selectedColor.name === color.name}
-                />
-              ))}
-            </div>
-          </div>
-
-          {/* Size Selection */}
-          <div>
-            <div className='mb-4 flex items-center justify-between'>
-              <div className='flex items-center'>
-                <span className='me-4 text-sm font-medium'>{sizesLabel}</span>
-                <div className='border-input flex rounded-sm border p-1'>
-                  {['eu', 'uk', 'us'].map(type => (
-                    <Button
-                      key={type}
-                      variant='ghost'
-                      size='sm'
-                      onClick={() => setSizeType(type as 'eu' | 'uk' | 'us')}
-                      className={cn(
-                        'cursor-pointer rounded-sm px-2 text-xs',
-                        sizeType === type && 'bg-secondary text-secondary-foreground',
-                      )}
-                      aria-label={`Seleccionar talla ${type.toUpperCase()}`}
-                      aria-selected={sizeType === type}
-                    >
-                      {type.toUpperCase()}
-                    </Button>
-                  ))}
-                </div>
-              </div>
-              <Button variant='ghost' className='h-9 px-4 py-2 text-primary cursor-pointer text-sm hover:underline'>
-                {sizeGuideLabel}
-              </Button>
-            </div>
-            <div className='grid grid-cols-4 gap-2 xl:grid-cols-5'>
-              {product.sizes.map(size => (
-                <Button
-                  key={size.eu}
-                  variant={selectedSize === size.eu ? 'secondary' : 'outline'}
-                  onClick={() => setSelectedSize(size.eu)}
-                  className='h-12 cursor-pointer rounded-full shadow-none'
-                >
-                  {sizeType === 'eu' ? size.eu : sizeType === 'uk' ? size.uk : size.us}
-                </Button>
-              ))}
-            </div>
-          </div>
-          {/* Add to Cart */}
-          <div>
-            <div className='mb-4 flex gap-4'>
-              <Button
-                className='h-12 flex-1 cursor-pointer rounded-md'
-                size='lg'
-                onClick={onAddToCart ? () => onAddToCart(product) : undefined}
-              >
-                <ShoppingBag />
-                {addToCartLabel}
-              </Button>
-              <Button
-                variant='outline'
-                size='icon'
-                className='border-input size-12 cursor-pointer rounded-md transition-colors'
-                onClick={() => {
-                  const next = !isWishlisted
-                  setIsWishlisted(next)
-                  onToggleWishlist?.(product, next)
-                }}
-                aria-label={isWishlisted ? removeFromWishlistLabel : addToWishlistLabel}
-              >
-                <ReactionToggle active={isWishlisted} icon={Heart} iconClassName='size-5' activeColorClassName='text-primary' />
-              </Button>
-            </div>
-            <div className='text-muted-foreground flex items-center justify-center gap-2 text-sm'>
-              <Truck className='size-4' />
-              <span>{freeDeliveryLabel}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  )
-}

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>
-  )
-}