@thorprovider/blocks 0.1.0

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

@@ -0,0 +1,274 @@
+'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/product-overview/product-quick-view-card.tsx

@@ -0,0 +1,135 @@
+'use client'
+
+import { Eye, Star } from 'lucide-react'
+
+import { Badge } from '../../../ui/badge'
+import { Card, CardContent } from '../../../ui/card'
+import { cn } from '../../../lib/utils'
+
+import type { QuickViewProduct } from './product-quick-view'
+
+const money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 })
+
+/**
+ * One product in the grid, and the thing a quick view is meant to keep you inside of.
+ *
+ * The whole card is the button. A card that carries a separate "Quick view" link has two targets
+ * for one intention, and on a touch screen the hover-revealed one is a target that never appears
+ * at all - so the control is drawn on hover and focus as an *affordance*, while the press area
+ * is the entire card at every input type.
+ */
+export function ProductQuickViewCard({
+  product,
+  isActive,
+  onOpen,
+}: {
+  product: QuickViewProduct
+  /** Whether this is the product currently open in the quick view. */
+  isActive: boolean
+  onOpen: () => void
+}) {
+  const swatches = product.variants.find(variant => variant.options.some(option => option.swatch))?.options ?? []
+
+  return (
+    <Card
+      className={cn(
+        'group/card relative gap-0 overflow-hidden py-0 transition-shadow',
+        // The mark that survives behind the dialog: when the reader closes it, the card they
+        // were looking at is the one still lit, so the grid tells them where they got to.
+        isActive ? 'ring-primary ring-2' : 'hover:shadow-lg'
+      )}
+    >
+      <div className='bg-muted relative aspect-4/5 w-full overflow-hidden'>
+        <img
+          src={product.image || undefined}
+          alt={product.imageAlt}
+          className='size-full object-cover transition-transform duration-500 ease-out group-hover/card:scale-[1.03]'
+          loading='lazy'
+          decoding='async'
+        />
+
+        {product.compareAt ? (
+          <Badge className='absolute top-3 left-3 rounded-full'>
+            {`${Math.round((1 - product.price / product.compareAt) * 100)}% de descuento`}
+          </Badge>
+        ) : null}
+
+        {/*
+          Drawn on hover and focus, and never the thing that has to be hit. `pointer-events-none`
+          keeps every press on the card's own trigger underneath, so there is exactly one target
+          however the reader is pointing at it.
+        */}
+        <div
+          aria-hidden='true'
+          className={cn(
+            'pointer-events-none absolute inset-x-0 bottom-0 flex justify-center p-3',
+            'translate-y-2 opacity-0 transition-[opacity,transform] duration-200 ease-out',
+            'group-hover/card:translate-y-0 group-hover/card:opacity-100',
+            'group-has-focus-visible/card:translate-y-0 group-has-focus-visible/card:opacity-100'
+          )}
+        >
+          <span className='bg-background/90 text-foreground ring-border flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium ring-1 backdrop-blur'>
+            <Eye className='size-4' />
+            Vista rápida
+          </span>
+        </div>
+      </div>
+
+      {/*
+        The card's one interactive element, and it covers the card.
+
+        A stretched link would leave only the title actually pressable: the picture sits over a
+        pseudo-element and swallows every click on the image and on the Quick view pill. A real
+        element in the DOM, on top, with an explicit z-index, is unambiguous at every input type.
+        It is empty and carries an accessible name, so the price and rating underneath are not
+        read as part of the button's label.
+      */}
+      <button
+        type='button'
+        onClick={onOpen}
+        aria-haspopup='dialog'
+        className='focus-visible:ring-ring/50 absolute inset-0 z-10 cursor-pointer rounded-xl outline-none focus-visible:ring-[3px]'
+      >
+        <span className='sr-only'>{`Vista rápida: ${product.name}`}</span>
+      </button>
+
+      <CardContent className='flex flex-col gap-1 p-4'>
+        <div className='flex items-start justify-between gap-3'>
+          <p className='text-base font-medium'>{product.name}</p>
+
+          <p className='shrink-0 text-base font-medium tabular-nums'>{money.format(product.price)}</p>
+        </div>
+
+        <p className='text-muted-foreground text-sm'>{product.tagline}</p>
+
+        <div className='mt-2 flex items-center justify-between gap-3'>
+          <p className='text-muted-foreground flex items-center gap-1.5 text-xs'>
+            {/* Foreground token per theming contract, never the only carrier of the rating. */}
+            <Star className='size-3.5 fill-foreground text-foreground' aria-hidden='true' />
+            <span className='text-foreground font-medium tabular-nums'>{product.rating}</span>
+            <span className='tabular-nums'>({product.reviewCount})</span>
+          </p>
+
+          {swatches.length > 0 ? (
+            <span className='flex items-center gap-1'>
+              {/*
+                Finish colours are product data, so they stay literal rather than tokenised, and
+                they are decoration here - the same information is in words inside the panel.
+              */}
+              {swatches.map(option => (
+                <span
+                  key={option.value}
+                  aria-hidden='true'
+                  className='ring-border size-3 rounded-full ring-1'
+                  style={{ backgroundColor: option.swatch }}
+                />
+              ))}
+            </span>
+          ) : null}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ProductQuickViewCard