@thorprovider/blocks 0.1.0

package/src/blocks/e-commerce/product-categories/product-category-4.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import type { LucideIcon } from 'lucide-react'
+import { Users, ShoppingBag } from 'lucide-react'
+
+import { Card, CardContent } from '../../../ui/card'
+import { Badge } from '../../../ui/badge'
+import { Avatar, AvatarImage, AvatarFallback } from '../../../ui/avatar'
+import { AvatarGroup } from './avatar-group'
+
+export interface ProductCategory4Category {
+  id: string
+  title: string
+  description: string
+  icon: LucideIcon
+  customers: string
+  products: number
+  avatarImages?: string[]
+}
+
+export interface ProductCategory4Props {
+  title?: string
+  description?: string
+  categories: ProductCategory4Category[]
+  productsLabel?: string
+  customersLabel?: string
+  onCategoryClick?: (category: ProductCategory4Category) => void
+}
+
+function getInitials(title: string): string {
+  return title
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map(word => word.charAt(0).toUpperCase())
+    .join('')
+}
+
+export function ProductCategory4({
+  title = 'Compra por categoría',
+  description = 'Explora nuestra selección de repuestos y accesorios',
+  categories,
+  productsLabel = 'productos',
+  customersLabel = 'clientes',
+  onCategoryClick,
+}: ProductCategory4Props) {
+  return (
+    <section className='bg-background w-full py-12 md:py-16'>
+      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+        <div className='mx-auto mb-12 max-w-3xl text-center'>
+          <h2 className='text-foreground mb-4 text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl'>
+            {title}
+          </h2>
+          <p className='text-muted-foreground text-lg md:text-xl'>{description}</p>
+        </div>
+
+        <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3'>
+          {categories.map(category => {
+            const Icon = category.icon
+            const clickable = Boolean(onCategoryClick)
+            return (
+              <Card
+                key={category.id}
+                className={`group relative overflow-hidden transition-all hover:shadow-md ${
+                  clickable ? 'cursor-pointer' : ''
+                }`}
+                onClick={onCategoryClick ? () => onCategoryClick(category) : undefined}
+                aria-label={clickable ? category.title : undefined}
+              >
+                <CardContent>
+                  <div className='mb-4 flex items-center justify-between'>
+                    <div className='bg-accent text-primary rounded-lg p-2.5' aria-hidden='true'>
+                      <Icon className='size-5' />
+                    </div>
+                    <Badge
+                      variant='secondary'
+                      className='bg-muted/50 rounded-sm px-2 py-1 font-semibold'
+                      aria-label={`${category.products} ${productsLabel}`}
+                    >
+                      <ShoppingBag className='me-1 size-3' />
+                      {category.products} {productsLabel}
+                    </Badge>
+                  </div>
+
+                  <h3 className='text-foreground mb-2 text-lg font-semibold'>{category.title}</h3>
+                  <p className='text-muted-foreground mb-4 text-sm'>{category.description}</p>
+
+                  <div className='flex items-center justify-between'>
+                    <div className='flex items-center gap-2'>
+                      {category.avatarImages?.length ? (
+                        <>
+                          <AvatarGroup>
+                            {category.avatarImages.slice(0, 3).map((src, i) => (
+                              <Avatar key={i} className='bg-muted size-6 border'>
+                                <AvatarImage src={src || undefined} alt='' />
+                                <AvatarFallback>{getInitials(category.title)}</AvatarFallback>
+                              </Avatar>
+                            ))}
+                          </AvatarGroup>
+                          <span
+                            className='text-muted-foreground flex items-center gap-1 text-sm'
+                            aria-label={`${category.customers} ${customersLabel}`}
+                          >
+                            <Users className='h-3.5 w-3.5' aria-hidden='true' />
+                            {category.customers} {customersLabel}
+                          </span>
+                        </>
+                      ) : (
+                        <span
+                          className='text-muted-foreground flex items-center gap-1 text-sm'
+                          aria-label={`${category.customers} ${customersLabel}`}
+                        >
+                          <Users className='h-3.5 w-3.5' aria-hidden='true' />
+                          {category.customers} {customersLabel}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default ProductCategory4

package/src/blocks/e-commerce/product-categories/product-category-5.tsx

@@ -0,0 +1,218 @@
+'use client'
+
+import { useState } from 'react'
+import { Card, CardContent } from '../../../ui/card'
+import { Badge } from '../../../ui/badge'
+import { Button } from '../../../ui/button'
+import { Input } from '../../../ui/input'
+import {
+  ArrowRight,
+  Search,
+  Laptop,
+  Shirt,
+  Home,
+  Dumbbell,
+  BookOpen,
+  Heart,
+  Car,
+  Utensils,
+  Gamepad2,
+  Baby,
+  Gift,
+  Wrench,
+} from 'lucide-react'
+import { cn } from '../../../lib/utils'
+
+export type CategoryIcon =
+  | 'electronics'
+  | 'fashion'
+  | 'home'
+  | 'sports'
+  | 'books'
+  | 'beauty'
+  | 'automotive'
+  | 'food'
+  | 'gaming'
+  | 'baby'
+  | 'gifts'
+  | 'tools'
+
+export interface ProductCategory5Category {
+  id: string
+  name: string
+  icon: CategoryIcon
+  description: string
+  itemCount: number
+  subcategories: string[]
+  featured?: boolean
+}
+
+export interface ProductCategory5Props {
+  title?: string
+  description?: string
+  categories: ProductCategory5Category[]
+  searchPlaceholder?: string
+  productsLabel?: string
+  featuredLabel?: string
+  browseLabel?: string
+  viewAllLabel?: string
+  notFoundLabel?: string
+  onBrowse?: (category: ProductCategory5Category) => void
+  onViewAll?: () => void
+}
+
+const categoryIcons: Record<CategoryIcon, typeof Laptop> = {
+  electronics: Laptop,
+  fashion: Shirt,
+  home: Home,
+  sports: Dumbbell,
+  books: BookOpen,
+  beauty: Heart,
+  automotive: Car,
+  food: Utensils,
+  gaming: Gamepad2,
+  baby: Baby,
+  gifts: Gift,
+  tools: Wrench,
+}
+
+export function ProductCategory5({
+  title = 'Explora categorías',
+  description = 'Encuentra lo que necesitas en nuestras categorías organizadas',
+  categories,
+  searchPlaceholder = 'Buscar categorías...',
+  productsLabel = 'productos disponibles',
+  featuredLabel = 'Destacado',
+  browseLabel = 'Explorar',
+  viewAllLabel = 'Ver todos los productos',
+  notFoundLabel = '¿No encuentras lo que buscas?',
+  onBrowse,
+  onViewAll,
+}: ProductCategory5Props) {
+  const [query, setQuery] = useState('')
+
+  const filteredCategories = categories.filter(category => {
+    const q = query.trim().toLowerCase()
+    if (!q) return true
+    return (
+      category.name.toLowerCase().includes(q) ||
+      category.subcategories.some(sub => sub.toLowerCase().includes(q))
+    )
+  })
+
+  const totalCount = categories.reduce((sum, category) => sum + category.itemCount, 0)
+
+  return (
+    <section className='py-12'>
+      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+        <div className='mb-8 text-center'>
+          <h2 className='mb-4 text-3xl font-bold tracking-tight text-balance'>{title}</h2>
+          <p className='text-muted-foreground mb-6 text-lg'>{description}</p>
+
+          <div className='relative mx-auto max-w-md'>
+            <Search
+              className='text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2'
+              aria-hidden='true'
+            />
+            <Input
+              placeholder={searchPlaceholder}
+              value={query}
+              onChange={e => setQuery(e.target.value)}
+              className='ps-9 h-9'
+              aria-label='Buscar categorías'
+            />
+          </div>
+        </div>
+
+        {filteredCategories.length === 0 ? (
+          <p className='text-muted-foreground py-10 text-center text-sm'>
+            Sin resultados para &quot;{query.trim()}&quot;
+          </p>
+        ) : (
+          <div className='grid grid-cols-1 gap-4 lg:grid-cols-2'>
+            {filteredCategories.map(category => {
+              const Icon = categoryIcons[category.icon]
+
+              return (
+                <Card
+                  key={category.id}
+                  className={cn(
+                    'group hover:border-primary relative py-0 transition-all duration-200 hover:shadow-md'
+                  )}
+                >
+                  <CardContent className='p-6'>
+                    <div className='flex items-start gap-4'>
+                      <div className='flex-shrink-0'>
+                        <div className='bg-primary/10 group-hover:bg-primary/20 flex size-12 items-center justify-center rounded-lg transition-colors'>
+                          <Icon className='text-primary size-6' aria-hidden='true' />
+                        </div>
+                      </div>
+
+                      <div className='min-w-0 flex-1'>
+                        <div className='flex items-start justify-between'>
+                          <div className='flex-1'>
+                            <div className='mb-2 flex items-center gap-2'>
+                              <h3 className='text-lg font-semibold transition-colors'>{category.name}</h3>
+                              {category.featured ? (
+                                <Badge
+                                  variant='secondary'
+                                  className='rounded-sm px-2 py-0.5 font-semibold'
+                                >
+                                  {featuredLabel}
+                                </Badge>
+                              ) : null}
+                            </div>
+                            <p className='text-muted-foreground mb-3 line-clamp-2 text-sm'>
+                              {category.description}
+                            </p>
+
+                            <div className='mb-3 flex flex-wrap gap-2'>
+                              {category.subcategories.map((sub, index) => (
+                                <span
+                                  key={index}
+                                  className='bg-muted text-muted-foreground rounded-md px-2 py-1 text-xs'
+                                >
+                                  {sub}
+                                </span>
+                              ))}
+                            </div>
+
+                            <div className='text-muted-foreground text-sm'>
+                              {category.itemCount.toLocaleString()} {productsLabel}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <Button
+                      variant='ghost'
+                      size='sm'
+                      className='absolute end-4 bottom-4 h-8 cursor-pointer px-3 text-xs opacity-0 transition-opacity group-hover:opacity-100'
+                      onClick={onBrowse ? () => onBrowse(category) : undefined}
+                    >
+                      {browseLabel}
+                      <ArrowRight />
+                    </Button>
+                  </CardContent>
+                </Card>
+              )
+            })}
+          </div>
+        )}
+
+        <div className='mt-8 text-center'>
+          <p className='text-muted-foreground mb-4 text-sm'>{notFoundLabel}</p>
+          <Button
+            variant='outline'
+            className='h-9 cursor-pointer px-4 py-2'
+            onClick={onViewAll}
+          >
+            {viewAllLabel} {totalCount.toLocaleString()}
+          </Button>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default ProductCategory5

package/src/blocks/e-commerce/product-list/product-card-1.tsx

@@ -0,0 +1,131 @@
+'use client'
+
+import { motion, useReducedMotion } from 'motion/react'
+
+import { Button } from '../../../ui/button'
+import { Card, CardContent, CardFooter } from '../../../ui/card'
+
+export interface Product {
+  id: string | number
+  title: string
+  price: number
+  originalPrice?: number
+  image: string
+  badge?: string
+}
+
+export interface ProductCard1Props {
+  products: Product[]
+  heading?: string
+  maxItems?: number
+  onAddToCart?: (product: Product) => void
+  onProductClick?: (product: Product) => void
+  addToCartLabel?: string
+}
+
+export function ProductCard1({
+  products,
+  heading,
+  maxItems = 6,
+  onAddToCart,
+  onProductClick,
+  addToCartLabel = 'Agregar al carrito',
+}: ProductCard1Props) {
+  const reduceMotion = useReducedMotion()
+  const displayedProducts = products.slice(0, maxItems)
+
+  return (
+    <section className='py-12'>
+      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+        {heading && (
+          <h2 className='mb-8 text-center text-2xl font-bold text-balance md:text-3xl'>{heading}</h2>
+        )}
+
+        <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:gap-6'>
+          {displayedProducts.map((product, index) => (
+            <motion.div
+              key={product.id}
+              initial={reduceMotion ? false : { opacity: 0, y: 16 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: '-40px' }}
+              whileHover={reduceMotion ? undefined : { y: -4 }}
+              transition={{
+                duration: 0.35,
+                delay: reduceMotion ? 0 : index * 0.05,
+                ease: 'easeOut',
+              }}
+            >
+              <Card
+                className={`flex h-full flex-col gap-4 overflow-hidden rounded-lg py-4 shadow-none transition-shadow duration-300 hover:shadow-md ${
+                  onProductClick ? 'cursor-pointer' : ''
+                }`}
+                onClick={onProductClick ? () => onProductClick(product) : undefined}
+              >
+                <CardContent className='flex flex-1 flex-col gap-4 px-4 '>
+                  <div className='relative aspect-square overflow-hidden rounded-md'>
+                    {product.badge && (
+                      <span className='bg-destructive text-destructive-foreground absolute top-2 left-2 z-10 rounded-full px-2 py-0.5 text-xs font-semibold'>
+                        {product.badge}
+                      </span>
+                    )}
+                    <img
+                      src={product.image || undefined}
+                      alt={product.title}
+                      className='size-full rounded-md object-contain'
+                      loading='lazy'
+                      width={400}
+                      height={400}
+                    />
+                  </div>
+
+                  <div className='flex flex-1 flex-col'>
+                    <h2 className='mb-1 font-medium text-balance'>
+                      {onProductClick ? (
+                        <button
+                          type='button'
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            onProductClick(product)
+                          }}
+                          className='hover:text-primary cursor-pointer text-left transition-colors'
+                        >
+                          {product.title}
+                        </button>
+                      ) : (
+                        product.title
+                      )}
+                    </h2>
+                    <div className='mt-auto flex items-baseline gap-2'>
+                      <p className='font-semibold'>${product.price.toFixed(2)}</p>
+                      {product.originalPrice && (
+                        <p className='text-muted-foreground text-sm line-through md:text-base xl:text-sm 2xl:text-base'>
+                          ${product.originalPrice.toFixed(2)}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                </CardContent>
+
+                <CardFooter className='bg-transparent px-3 pt-0 border-t-0 md:px-4'>
+                  <Button
+                    variant='outline'
+                    size='sm'
+                    className='h-8 w-full cursor-pointer px-3 text-sm text-xs'
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      onAddToCart?.(product)
+                    }}
+                  >
+                    {addToCartLabel}
+                  </Button>
+                </CardFooter>
+              </Card>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default ProductCard1

package/src/blocks/e-commerce/product-list/product-card-2.tsx

@@ -0,0 +1,71 @@
+import { Star } from 'lucide-react'
+import { Card, CardContent, CardTitle } from '../../../ui/card'
+
+export interface ProductCard2Product {
+  id: string | number
+  title: string
+  image: string
+  price: number
+  rating: number
+}
+
+export interface ProductCard2Props {
+  products: ProductCard2Product[]
+  heading?: string
+  description?: string
+}
+
+export function ProductCard2({ products, heading, description }: ProductCard2Props) {
+  return (
+    <section className='py-12'>
+      <div className='mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 sm:px-6 lg:px-8'>
+        {heading || description ? (
+          <header className='flex flex-col gap-2'>
+            {heading && <h2 className='text-3xl font-bold text-balance sm:text-4xl'>{heading}</h2>}
+            {description && (
+              <p className='text-muted-foreground max-w-[60ch] text-balance'>{description}</p>
+            )}
+          </header>
+        ) : null}
+
+        <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3'>
+          {products.map(product => (
+            <Card key={product.id} className='group overflow-hidden transition-all hover:shadow-lg'>
+              <CardContent className='flex flex-col gap-4'>
+                <div className='overflow-hidden rounded-md'>
+                  <img
+                    src={product.image || undefined}
+                    alt={product.title}
+                    width={400}
+                    height={400}
+                    className='aspect-square w-full object-cover transition-transform duration-300 group-hover:scale-105'
+                  />
+                </div>
+
+                <div className='flex flex-col gap-2'>
+                  <CardTitle className='line-clamp-1 text-lg font-semibold text-balance sm:text-xl'>
+                    {product.title}
+                  </CardTitle>
+
+                  <div
+                    className='flex items-center gap-0.5'
+                    aria-label={`${product.rating} out of 5 stars`}
+                    role='img'
+                  >
+                    {Array.from({ length: product.rating }).map((_, i) => (
+                      <Star key={i} className='fill-foreground text-foreground size-4 sm:size-5' />
+                    ))}
+                  </div>
+
+                  <p className='text-lg font-semibold sm:text-xl'>${product.price.toFixed(2)}</p>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default ProductCard2