@thorprovider/blocks 0.1.3 → 2.0.0

package/src/blocks/e-commerce/product-list/product-card-5-checkbox-check.tsx

@@ -1,98 +0,0 @@
-'use client'
-
-import { useLayoutEffect, useRef, useState } from 'react'
-import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'
-
-import { cn } from '../../../lib/utils'
-
-/**
- * Animated checkbox whose tick draws on with a stroke path instead of appearing instantly.
- *
- * A drop-in replacement for `ui/checkbox`: same props, same look at rest. Two things make the
- * draw work, and both are easy to get wrong:
- *
- * 1. The indicator uses `keepMounted`. Base UI unmounts it when unchecked, and an element that
- *    was never in the DOM cannot transition — the tick would still pop.
- * 2. `--check-len` is measured from the real path with `getTotalLength()` rather than hard-coded.
- *    A guessed dash length either over-draws (a visible tail) or under-draws (a clipped tick),
- *    and it drifts the moment the icon or the box size changes.
- *
- * Transitioning the offset (rather than animating it) means an uncheck mid-draw reverses cleanly
- * from wherever it had got to, instead of jumping to the end and restarting.
- */
-const BOX_MS = 150
-const DRAW_MS = 350
-const UNCHECK_MS = 150
-const EASE = 'cubic-bezier(0.22, 1, 0.36, 1)'
-
-export function CheckboxCheck({ className, indeterminate, ...props }: CheckboxPrimitive.Root.Props) {
-  const pathRef = useRef<SVGPathElement>(null)
-  const [length, setLength] = useState(15)
-
-  useLayoutEffect(() => {
-    const path = pathRef.current
-    if (path) {
-      setLength(Math.ceil(path.getTotalLength()))
-    }
-  }, [])
-
-  // A partial selection draws a dash, not a tick: a full tick for "some of these are selected"
-  // reads as "all of them". The tick is lucide's `Check`/`Minus` rescaled from their 24-unit
-  // viewBox into this 10.17-unit one (×0.4236), so the painted weight matches every static tick.
-  const mark = indeterminate ? 'M2.12 5.08H8.47' : 'M1.69 5.08L3.81 7.2L8.47 2.54'
-
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      className={cn(
-        'peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary',
-        'motion-reduce:transition-none',
-        className
-      )}
-      style={{ transition: `background-color ${BOX_MS}ms ${EASE}, border-color ${BOX_MS}ms ${EASE}` }}
-      indeterminate={indeterminate}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator
-        keepMounted
-        data-slot="checkbox-indicator"
-        className={cn(
-          'grid size-3.5 place-content-center text-current',
-          // Offset the full dash length at rest, none when checked. Driving it from the
-          // indicator's own data-checked keeps the two durations asymmetric: the draw is slower
-          // and deliberate, the erase is quick.
-          // The transition lives in a class, not inline: an inline `transition` beats any
-          // stylesheet rule, so the slower draw duration below could never take effect.
-          '[&_path]:[transition:stroke-dashoffset_var(--check-uncheck)_var(--check-ease)]',
-          '[&_path]:[stroke-dashoffset:var(--check-len)]',
-          'data-checked:[&_path]:[stroke-dashoffset:0]',
-          'data-checked:[&_path]:[transition-duration:var(--check-draw)]',
-          'motion-reduce:[&_path]:transition-none'
-        )}
-        style={
-          {
-            '--check-len': length,
-            '--check-draw': `${DRAW_MS}ms`,
-            '--check-uncheck': `${UNCHECK_MS}ms`,
-            '--check-ease': EASE,
-          } as React.CSSProperties
-        }
-      >
-        <svg viewBox="0 0 10.1668 10.1668" fill="none" aria-hidden className="size-full overflow-visible">
-          <path
-            ref={pathRef}
-            d={mark}
-            stroke="currentColor"
-            // 2 in lucide's 24-unit box, rescaled: the same painted weight as every static tick.
-            strokeWidth={0.9}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            style={{ strokeDasharray: length }}
-          />
-        </svg>
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  )
-}
-
-export default CheckboxCheck

package/src/blocks/e-commerce/product-list/product-card-5-reaction-toggle.tsx

@@ -1,171 +0,0 @@
-'use client'
-
-import { useEffect, useRef, useState, type ComponentType } from 'react'
-
-import { cn } from '../../../lib/utils'
-
-const PARTICLE_COUNT = 8
-
-/**
- * The pop/burst keyframes travel with the component instead of living in the
- * app's stylesheet, so this file is self-contained: drop it in and the
- * animation works with no Tailwind config or global CSS to copy over.
- * Injected once per page, guarded by the marker attribute.
- *
- * The marker and the keyframe names deliberately match `product-card-3`'s copy of this
- * component. Blocks install into one flat directory, so a buyer who takes both gets two files
- * with identical styles — and because the guard is on the marker rather than on the file, the
- * second one finds the first's `<style>` already there and injects nothing.
- */
-const STYLE_MARKER = 'data-reaction-toggle-keyframes'
-const STYLES = `
-@keyframes reaction-toggle-pop {
-  0% { transform: scale(1); }
-  30% { transform: scale(0.82); }
-  100% { transform: scale(1); }
-}
-@keyframes reaction-toggle-burst {
-  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
-  20% { opacity: 1; transform: translate(calc(var(--rx) * 0.25), calc(var(--ry) * 0.25)) scale(1); }
-  100% { opacity: 0; transform: translate(var(--rx), var(--ry)) scale(0.6); }
-}
-.reaction-toggle-pop {
-  animation: reaction-toggle-pop 350ms cubic-bezier(0.34, 1.96, 0.64, 1);
-}
-.reaction-toggle-burst {
-  animation-name: reaction-toggle-burst;
-  animation-timing-function: ease-out;
-  animation-fill-mode: forwards;
-}
-@media (prefers-reduced-motion: reduce) {
-  .reaction-toggle-pop,
-  .reaction-toggle-burst { animation: none !important; }
-}
-`
-
-function useReactionToggleStyles() {
-  useEffect(() => {
-    if (document.head.querySelector(`[${STYLE_MARKER}]`)) return
-
-    const style = document.createElement('style')
-    style.setAttribute(STYLE_MARKER, '')
-    style.textContent = STYLES
-    document.head.append(style)
-  }, [])
-}
-
-type ReactionIconProps = {
-  className?: string
-}
-
-type Particle = {
-  rx: number
-  ry: number
-  duration: number
-  delay: number
-  size: number
-}
-
-function buildParticles(): Particle[] {
-  return Array.from({ length: PARTICLE_COUNT }, (_, i) => {
-    const angle = (Math.PI * 2 * i) / PARTICLE_COUNT + (Math.random() - 0.5) * 0.4
-    const dist = 16 + Math.random() * 10
-
-    return {
-      rx: Math.round(Math.cos(angle) * dist * 10) / 10,
-      ry: Math.round(Math.sin(angle) * dist * 10) / 10,
-      duration: Math.round(500 + Math.random() * 200),
-      delay: Math.round(Math.random() * 60),
-      size: Math.round((0.7 + Math.random() * 0.8) * 100) / 100,
-    }
-  })
-}
-
-type ReactionToggleProps = {
-  /** Whether the reaction is currently active (liked/helpful/etc). */
-  active: boolean
-  /** Icon component to render, e.g. `Heart` or `ThumbsUp` from lucide-react. */
-  icon: ComponentType<ReactionIconProps>
-  /** Wrapper class - sizing/positioning of the whole control. */
-  className?: string
-  /** Class applied to the icon itself (e.g. `size-5`). */
-  iconClassName?: string
-  /**
-   * Tailwind color class (e.g. `text-primary`, `text-destructive`) applied to the
-   * icon and particles while active. Drives `fill-current`/`bg-current`, so it
-   * stays in sync with the design system instead of a hardcoded brand color.
-   */
-  activeColorClassName?: string
-}
-
-/**
- * Heart/thumbs-up style reaction control: the icon pops with an overshoot scale
- * and sprinkles 8 particles outward the moment it becomes active.
- */
-export function ProductCard5ReactionToggle({
-  active,
-  icon: Icon,
-  className,
-  iconClassName,
-  activeColorClassName = 'text-primary',
-}: ReactionToggleProps) {
-  const [isBursting, setIsBursting] = useState(false)
-  const wasActive = useRef(active)
-  const particlesRef = useRef<Particle[]>(buildParticles())
-
-  useReactionToggleStyles()
-
-  useEffect(() => {
-    if (active && !wasActive.current) {
-      particlesRef.current = buildParticles()
-      setIsBursting(true)
-      const timeout = setTimeout(() => setIsBursting(false), 700)
-      wasActive.current = active
-      return () => clearTimeout(timeout)
-    }
-
-    wasActive.current = active
-  }, [active])
-
-  return (
-    <span className={cn('relative inline-flex', className)}>
-      <span className={cn('inline-flex', active && 'reaction-toggle-pop')}>
-        <Icon
-          className={cn(
-            'transition-[fill,stroke,color] duration-150 ease-[cubic-bezier(0.22,1,0.36,1)]',
-            active ? cn('fill-current', activeColorClassName) : 'fill-transparent',
-            iconClassName
-          )}
-        />
-      </span>
-
-      {isBursting && (
-        <span
-          aria-hidden='true'
-          className={cn('pointer-events-none absolute top-1/2 left-1/2 size-0', activeColorClassName)}
-        >
-          {particlesRef.current.map((particle, index) => (
-            <i
-              key={index}
-              className='reaction-toggle-burst absolute rounded-full bg-current opacity-0'
-              style={
-                {
-                  '--rx': `${particle.rx}px`,
-                  '--ry': `${particle.ry}px`,
-                  animationDuration: `${particle.duration}ms`,
-                  animationDelay: `${particle.delay}ms`,
-                  width: `${2.5 * particle.size}px`,
-                  height: `${2.5 * particle.size}px`,
-                  left: `${-1.25 * particle.size}px`,
-                  top: `${-1.25 * particle.size}px`,
-                } as React.CSSProperties
-              }
-            />
-          ))}
-        </span>
-      )}
-    </span>
-  )
-}
-
-export default ProductCard5ReactionToggle

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

@@ -1,367 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
-import { Badge } from '../../../ui/badge'
-import { Button } from '../../../ui/button'
-import { CheckboxCheck } from './product-card-5-checkbox-check'
-import { InputGroup, InputGroupAddon, InputGroupInput } from '../../../ui/input-group'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../ui/table'
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../../../ui/select'
-import { Heart, ShoppingCart, Star, Search, Filter, Eye, ArrowUpDown, GitCompare } from 'lucide-react'
-import { cn } from '../../../lib/utils'
-import { ProductCard5ReactionToggle } from './product-card-5-reaction-toggle'
-
-export interface ProductCard5Product {
-  id: string
-  name: string
-  category: string
-  price: number
-  rating: number
-  reviews: number
-  image: string
-  stock: string
-  specifications: string
-  brand: string
-}
-
-export interface ProductCard5Props {
-  products: ProductCard5Product[]
-  onToggleWishlist?: (product: ProductCard5Product) => void
-  onAddToCart?: (product: ProductCard5Product) => void
-  onQuickView?: (product: ProductCard5Product) => void
-  onCompare?: (products: ProductCard5Product[]) => void
-  onExport?: (products: ProductCard5Product[]) => void
-}
-
-/**
- * Stock state as a Badge variant rather than a hand-mixed palette.
- *
- * These used to be literal `bg-green-100 … dark:bg-green-900/20` triples, which is the one thing
- * a themed design system cannot absorb: they ignored the customizer entirely and needed a manual
- * `dark:` for every value. `secondary` and `destructive` are the tokens that already mean
- * "fine" and "not fine", and the label carries the meaning in words either way.
- */
-const stockVariants: Record<string, 'secondary' | 'outline' | 'destructive'> = {
-  'In Stock': 'secondary',
-  'Low Stock': 'outline',
-  'Out of Stock': 'destructive',
-}
-
-export function ProductCard5({
-  products,
-  onToggleWishlist,
-  onAddToCart,
-  onQuickView,
-  onCompare,
-  onExport,
-}: ProductCard5Props) {
-  const [searchQuery, setSearchQuery] = useState('')
-  const [categoryFilter, setCategoryFilter] = useState('all')
-  const [selectedProducts, setSelectedProducts] = useState<string[]>([])
-  const [sortBy, setSortBy] = useState<'name' | 'price' | 'rating'>('name')
-  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc')
-  const [wishlisted, setWishlisted] = useState<string[]>([])
-
-  const filteredProducts = products
-    .filter(product => {
-      const matchesSearch =
-        product.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        product.brand.toLowerCase().includes(searchQuery.toLowerCase())
-      const matchesCategory = categoryFilter === 'all' || product.category === categoryFilter
-      return matchesSearch && matchesCategory
-    })
-    .sort((a, b) => {
-      let aValue: string | number = a[sortBy]
-      let bValue: string | number = b[sortBy]
-
-      if (sortOrder === 'asc') {
-        return aValue < bValue ? -1 : aValue > bValue ? 1 : 0
-      } else {
-        return aValue > bValue ? -1 : aValue < bValue ? 1 : 0
-      }
-    })
-
-  const categories = [...new Set(products.map(p => p.category))]
-
-  const selectedProductObjects = products.filter(p => selectedProducts.includes(p.id))
-
-  const handleSort = (field: 'name' | 'price' | 'rating') => {
-    if (sortBy === field) {
-      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')
-    } else {
-      setSortBy(field)
-      setSortOrder('asc')
-    }
-  }
-
-  const toggleProductSelection = (productId: string) => {
-    setSelectedProducts(prev => (prev.includes(productId) ? prev.filter(id => id !== productId) : [...prev, productId]))
-  }
-
-  const toggleWishlist = (product: ProductCard5Product) => {
-    setWishlisted(prev => (prev.includes(product.id) ? prev.filter(id => id !== product.id) : [...prev, product.id]))
-    onToggleWishlist?.(product)
-  }
-
-  const renderStars = (rating: number) => {
-    return Array.from({ length: 5 }, (_, i) => (
-      <Star
-        key={i}
-        aria-hidden='true'
-        className={cn(
-          'size-3',
-          i < Math.floor(rating) ? 'fill-foreground text-foreground' : i < rating ? 'text-foreground' : ''
-        )}
-      />
-    ))
-  }
-
-  return (
-    <section className='py-8'>
-      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-        <Card>
-          <CardHeader>
-            <div className='flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between'>
-              <div>
-                <CardTitle className='text-2xl text-balance'>Comparación de productos</CardTitle>
-                <p className='text-muted-foreground'>Compara productos lado a lado para tomar la mejor decisión</p>
-              </div>
-              {/*
-                No height, padding or cursor overrides on top of the variant: the default size
-                already is `h-9 px-4`, and re-stating it by class is how a button drifts out of
-                step with every other button the moment the design system moves.
-              */}
-              {selectedProducts.length > 0 && (
-                <Button onClick={onCompare ? () => onCompare(selectedProductObjects) : undefined}>
-                  <GitCompare data-icon='inline-start' aria-hidden='true' />
-                  Comparar {selectedProducts.length} productos
-                </Button>
-              )}
-            </div>
-          </CardHeader>
-          <CardContent>
-            {/* Filters */}
-            <div className='mb-6 flex flex-col gap-4 sm:flex-row sm:items-center'>
-              {/*
-                An InputGroup rather than a relative div with an absolutely positioned icon and
-                a hand-picked `ps-9` to clear it. The group owns that offset, so the icon and the
-                text cannot drift apart when the radius or the input's height changes.
-              */}
-              <InputGroup className='max-w-md flex-1'>
-                <InputGroupAddon>
-                  <Search />
-                </InputGroupAddon>
-                <InputGroupInput
-                  placeholder='Buscar productos o marcas...'
-                  value={searchQuery}
-                  onChange={e => setSearchQuery(e.target.value)}
-                  aria-label='Buscar productos o marcas'
-                />
-              </InputGroup>
-              <Select value={categoryFilter} onValueChange={value => value && setCategoryFilter(value)}>
-                <SelectTrigger className='w-[180px]' aria-label='Filtrar por categoría'>
-                  <Filter className='me-2 size-4' />
-                  <SelectValue>{categoryFilter === 'all' ? 'Todas las categorías' : categoryFilter}</SelectValue>
-                </SelectTrigger>
-                <SelectContent>
-                  {/* Items belong in a group — the list is one set, not loose children. */}
-                  <SelectGroup>
-                    <SelectItem value='all'>Todas las categorías</SelectItem>
-                    {categories.map(category => (
-                      <SelectItem key={category} value={category}>
-                        {category}
-                      </SelectItem>
-                    ))}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </div>
-
-            {/* Products Table */}
-            <div className='overflow-x-auto rounded-md border'>
-              <Table className='min-w-full table-fixed'>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead className='w-12 ps-4'>
-                      <CheckboxCheck
-                        checked={selectedProducts.length === filteredProducts.length && filteredProducts.length > 0}
-                        onCheckedChange={checked => {
-                          if (checked) {
-                            setSelectedProducts(filteredProducts.map(p => p.id))
-                          } else {
-                            setSelectedProducts([])
-                          }
-                        }}
-                      />
-                    </TableHead>
-                    <TableHead className='w-56 min-w-[200px]'>Producto</TableHead>
-                    {/*
-                      A Button inside the header, not an onClick on the cell.
-
-                      A `<th>` with a click handler is invisible to the keyboard and announces
-                      nothing: there was no way to sort this table without a mouse, and a screen
-                      reader was never told the column was sortable or which way it currently
-                      runs. `aria-sort` on the header states the direction, and the button is the
-                      thing that takes focus.
-                    */}
-                    {([
-                      { field: 'name', label: 'Detalles', width: 'w-52 min-w-[180px]' },
-                      { field: 'price', label: 'Precio', width: 'w-32 min-w-[100px]' },
-                      { field: 'rating', label: 'Valoración', width: 'w-32 min-w-[100px]' },
-                    ] as const).map(column => (
-                      <TableHead
-                        key={column.field}
-                        className={column.width}
-                        aria-sort={
-                          sortBy === column.field
-                            ? sortOrder === 'asc'
-                              ? 'ascending'
-                              : 'descending'
-                            : 'none'
-                        }
-                      >
-                        <Button
-                          variant='ghost'
-                          size='sm'
-                          className='-ms-2 h-8 gap-1 px-2'
-                          onClick={() => handleSort(column.field)}
-                        >
-                          {column.label}
-                          <ArrowUpDown data-icon='inline-end' aria-hidden='true' />
-                        </Button>
-                      </TableHead>
-                    ))}
-                    <TableHead className='w-32 min-w-[100px] text-center'>Stock</TableHead>
-                    <TableHead className='w-34 min-w-[90px] pe-3 text-center'>Acciones</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {filteredProducts.map(product => (
-                    <TableRow key={product.id}>
-                      <TableCell className='ps-4'>
-                        <CheckboxCheck
-                          checked={selectedProducts.includes(product.id)}
-                          onCheckedChange={() => toggleProductSelection(product.id)}
-                        />
-                      </TableCell>
-                      <TableCell className='w-56 min-w-[200px] break-words whitespace-normal'>
-                        <div className='flex items-center gap-3'>
-                          <img src={product.image || undefined} alt={product.name} className='size-12 rounded-md object-cover' />
-                          <div>
-                            <div className='font-medium'>{product.name}</div>
-                            <div className='text-muted-foreground text-sm'>
-                              {product.brand} • {product.category}
-                            </div>
-                          </div>
-                        </div>
-                      </TableCell>
-                      <TableCell className='w-52 min-w-[180px] break-words whitespace-normal'>
-                        <div>
-                          <div className='text-muted-foreground text-sm'>{product.specifications}</div>
-                        </div>
-                      </TableCell>
-                      <TableCell className='w-32 min-w-[100px]'>
-                        <div className='flex items-center gap-2'>
-                          <span className='font-semibold'>${product.price}</span>
-                        </div>
-                      </TableCell>
-                      <TableCell className='w-32 min-w-[100px]'>
-                        <div className='flex items-center gap-2'>
-                          <div className='flex'>{renderStars(product.rating)}</div>
-                          <span className='text-muted-foreground text-sm'>
-                            {product.rating} ({product.reviews})
-                          </span>
-                        </div>
-                      </TableCell>
-                      <TableCell className='w-32 min-w-[100px] text-center'>
-                        <Badge variant={stockVariants[product.stock] ?? 'secondary'} className='rounded-full'>
-                          {product.stock}
-                        </Badge>
-                      </TableCell>
-                      <TableCell className='w-34 min-w-[90px] pe-4 text-center'>
-                        <div className='flex items-center justify-center gap-1'>
-                          <Button
-                            variant='ghost'
-                            size='icon-sm'
-                            aria-label={`Vista rápida de ${product.name}`}
-                            onClick={onQuickView ? () => onQuickView(product) : undefined}
-                          >
-                            <Eye />
-                          </Button>
-
-                          {/*
-                            The same reaction control the card blocks use: the heart pops with an
-                            overshoot and throws eight particles the moment it becomes active.
-                            It carries its own copy of the file rather than importing from another
-                            block, because blocks install one at a time into a flat directory — a
-                            part shared across two blocks only arrives if the buyer happens to
-                            take both. The keyframes dedupe by marker if they do.
-                          */}
-                          <Button
-                            variant='ghost'
-                            size='icon-sm'
-                            onClick={() => toggleWishlist(product)}
-                            aria-pressed={wishlisted.includes(product.id)}
-                            aria-label={
-                              wishlisted.includes(product.id)
-                                ? `Quitar ${product.name} de la lista de deseos`
-                                : `Agregar ${product.name} a la lista de deseos`
-                            }
-                          >
-                            <ProductCard5ReactionToggle
-                              active={wishlisted.includes(product.id)}
-                              icon={Heart}
-                              iconClassName={cn(
-                                'size-4',
-                                !wishlisted.includes(product.id) && 'text-muted-foreground'
-                              )}
-                              activeColorClassName='text-destructive'
-                            />
-                          </Button>
-
-                          <Button
-                            size='icon-sm'
-                            disabled={product.stock === 'Out of Stock'}
-                            aria-label={`Agregar ${product.name} al carrito`}
-                            onClick={onAddToCart ? () => onAddToCart(product) : undefined}
-                          >
-                            <ShoppingCart />
-                          </Button>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-
-            {/* Summary */}
-            <div className='text-muted-foreground mt-6 flex flex-wrap items-center justify-between gap-4 text-sm'>
-              <div>
-                Mostrando {filteredProducts.length} de {products.length} productos
-                {selectedProducts.length > 0 && (
-                  <span className='ms-2'>• {selectedProducts.length} seleccionados</span>
-                )}
-              </div>
-              <div className='flex items-center gap-4'>
-                <span>
-                  Ordenar por: {sortBy} ({sortOrder})
-                </span>
-                <Button
-                  variant='outline'
-                  size='sm'
-                  onClick={onExport ? () => onExport(filteredProducts) : undefined}
-                >
-                  Exportar lista
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </section>
-  )
-}
-
-export default ProductCard5