@thorprovider/blocks 1.0.0 → 3.0.0

package/src/blocks/e-commerce/product-overview/product-quick-view-card.tsx

@@ -1,135 +0,0 @@
-'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

package/src/blocks/e-commerce/product-overview/product-quick-view-dialog.tsx

@@ -1,393 +0,0 @@
-'use client'
-
-import { useEffect, useMemo, useState } from 'react'
-import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
-import { Check, Minus, Plus, Star } from 'lucide-react'
-
-import { Badge } from '../../../ui/badge'
-import { Button } from '../../../ui/button'
-import { ButtonGroup, ButtonGroupText } from '../../../ui/button-group'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '../../../ui/dialog'
-import { Separator } from '../../../ui/separator'
-import { ToggleGroup, ToggleGroupItem } from '../../../ui/toggle-group'
-
-import type { QuickViewProduct } from './product-quick-view'
-
-const money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 })
-
-/** How long the added-to-cart confirmation stays up before the button returns to its label. */
-const confirmationMs = 2400
-
-/**
- * What a product opens on: its stated default where it has one, and otherwise the first option
- * that is actually in stock — never a sold-out one, which would put the panel in a state whose
- * add-to-cart button cannot honestly be pressed.
- */
-function defaultSelection(product: QuickViewProduct): Record<string, string> {
-  return Object.fromEntries(
-    product.variants.map(variant => {
-      const stated = variant.options.find(
-        option => option.value === variant.defaultValue && option.available
-      )
-      const fallback = variant.options.find(option => option.available) ?? variant.options[0]
-
-      return [variant.key, (stated ?? fallback).value]
-    })
-  )
-}
-
-/**
- * The panel a quick view opens, and the reason the pattern exists.
- *
- * A quick view is not a small product page. It is a promise that the reader will not lose the
- * grid, so this one keeps the whole catalogue reachable from inside: the strip under the picture
- * is the other products, not other angles of this one. Choosing from it re-dresses the panel
- * around a new product, the grid behind marks where the reader has got to, and closing returns
- * them to a grid they never actually left.
- */
-export function ProductQuickViewDialog({
-  products,
-  activeIndex,
-  onActiveIndexChange,
-  onClose,
-  onAddToCart,
-}: {
-  products: QuickViewProduct[]
-  /** Which product is open, or `null` when the dialog is closed. */
-  activeIndex: number | null
-  onActiveIndexChange: (index: number) => void
-  onClose: () => void
-  onAddToCart?: (
-    product: QuickViewProduct,
-    quantity: number,
-    selection: Record<string, string>
-  ) => void
-}) {
-  const reduceMotion = useReducedMotion()
-  const product = activeIndex === null ? null : products[activeIndex]
-
-  const [selection, setSelection] = useState<Record<string, string>>({})
-  const [quantity, setQuantity] = useState(1)
-  const [addedCount, setAddedCount] = useState(0)
-
-  /*
-    One effect keyed on the product's identity rather than three scattered resets. Carrying a
-    "brushed brass" across from a pendant to a sofa is worse than starting again, and a quantity
-    of four floor lamps should not become four sofas because the reader stepped sideways.
-  */
-  useEffect(() => {
-    if (!product) {
-      return
-    }
-
-    setSelection(defaultSelection(product))
-    setQuantity(1)
-    setAddedCount(0)
-  }, [product?.id]) // eslint-disable-line react-hooks/exhaustive-deps
-
-  useEffect(() => {
-    if (addedCount === 0) {
-      return
-    }
-
-    const timer = setTimeout(() => setAddedCount(0), confirmationMs)
-
-    return () => clearTimeout(timer)
-  }, [addedCount])
-
-  /*
-    The chosen options in words, for the live region and the stock line. Built from the variant
-    order rather than from the selection object, so it reads the way the controls are stacked
-    instead of in whatever order the keys happen to sit in.
-  */
-  const selectionSummary = useMemo(() => {
-    if (!product) {
-      return ''
-    }
-
-    return product.variants
-      .map(variant => variant.options.find(option => option.value === selection[variant.key])?.label)
-      .filter(Boolean)
-      .join(' · ')
-  }, [product, selection])
-
-  if (!product || activeIndex === null) {
-    return null
-  }
-
-  const discount = product.compareAt ? Math.round((1 - product.price / product.compareAt) * 100) : null
-
-  return (
-    <Dialog open onOpenChange={next => !next && onClose()}>
-      {/*
-        `max-h` plus `overflow-y-auto` is what makes this usable below a laptop. The popup is
-        fixed and centred with a translate, so without a bound it grew past both edges of a phone
-        and the add-to-cart button ended up off the bottom of the screen with no way to reach it
-        — the page behind a fixed element cannot scroll to it either.
-      */}
-      <DialogContent className='max-h-[92dvh] w-full overflow-y-auto p-0 sm:max-w-4xl md:h-[38rem] md:max-h-[92dvh] md:overflow-hidden'>
-        <DialogHeader className='sr-only'>
-          <DialogTitle>{product.name}</DialogTitle>
-          <DialogDescription>{product.description}</DialogDescription>
-        </DialogHeader>
-
-        {/*
-          A fixed height from `md`, and the detail column scrolls inside it.
-
-          The popup is centred with a -50% translate, so its height decides where its top edge
-          lands. Every product carries a different length of description and a different number
-          of variant rows, so stepping through the strip re-measured the panel and slid the whole
-          dialog up and down under the reader's cursor - the thumbnail they wanted next was no
-          longer where they were pointing. Holding the height still makes the strip a control
-          rather than a moving target. Below `md` the columns stack and the whole popup scrolls,
-          where a fixed height would be the wrong answer.
-        */}
-        <div className='grid gap-0 md:h-full md:min-h-0 md:grid-cols-[minmax(0,0.95fr)_minmax(0,1fr)]'>
-          <div className='bg-muted/40 flex flex-col gap-3 p-4 sm:p-5 md:min-h-0 md:justify-center md:overflow-y-auto'>
-            {/*
-              The picture cross-fades rather than cutting. At this size a hard swap reads as a
-              flicker, and the fade is what ties the thumbnail that was pressed to the picture
-              that arrives.
-            */}
-            <div className='bg-muted relative aspect-square w-full overflow-hidden rounded-lg'>
-              <AnimatePresence initial={false} mode='popLayout'>
-                <motion.img
-                  key={product.id}
-                  src={product.image || undefined}
-                  alt={product.imageAlt}
-                  className='absolute inset-0 size-full object-cover'
-                  initial={reduceMotion ? false : { opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={reduceMotion ? undefined : { opacity: 0 }}
-                  transition={{ duration: 0.24, ease: 'easeOut' }}
-                  decoding='async'
-                />
-              </AnimatePresence>
-
-              <Badge variant='secondary' className='absolute top-3 left-3 rounded-full'>
-                {product.category}
-              </Badge>
-            </div>
-
-            {/*
-              `spacing={2}` rather than a `gap-2` class. A ToggleGroup at the default spacing of
-              zero is a segmented control: it strips the item radii, collapses the shared borders
-              and adds `px-2` to every item through a `group-data-[spacing=0]` selector that no
-              plain `p-0` utility can outrank. That padding around a small thumbnail was the odd
-              width and the odd gaps; asking for real spacing turns the whole rule off.
-
-              A ToggleGroup rather than a row of buttons for the same reason it is used for the
-              variants: single selection, roving focus and arrow-key movement, none of which a
-              loop of buttons gets without being told.
-            */}
-            <ToggleGroup
-              type='multiple'
-              spacing={2}
-              value={[String(activeIndex)]}
-              onValueChange={value => value[0] && onActiveIndexChange(Number(value[0]))}
-              aria-label='Elegir producto'
-              className='grid w-full grid-cols-4'
-            >
-              {products.map((entry, index) => (
-                <ToggleGroupItem
-                  key={entry.id}
-                  value={String(index)}
-                  aria-label={entry.name}
-                  className='data-[state=on]:ring-primary size-auto min-w-0 overflow-hidden rounded-md p-0 ring-2 ring-transparent transition-shadow data-[state=on]:bg-transparent'
-                >
-                  <img
-                    src={entry.image || undefined}
-                    alt=''
-                    className='bg-muted aspect-square w-full object-cover'
-                    loading='lazy'
-                    decoding='async'
-                  />
-                </ToggleGroupItem>
-              ))}
-            </ToggleGroup>
-
-            <p className='text-muted-foreground text-center font-mono text-xs tabular-nums'>
-              {`${activeIndex + 1} / ${products.length}`}
-            </p>
-          </div>
-
-          <div className='flex flex-col p-4 pt-5 sm:p-6 md:min-h-0 md:overflow-y-auto'>
-            <p className='text-muted-foreground text-xs tracking-[0.16em] uppercase'>{product.tagline}</p>
-
-            <h2 className='mt-2 text-2xl font-semibold tracking-tight text-balance'>{product.name}</h2>
-
-            <div className='mt-3 flex flex-wrap items-center gap-x-3 gap-y-2'>
-              <p className='text-xl font-semibold tabular-nums'>{money.format(product.price)}</p>
-              {product.compareAt ? (
-                <p className='text-muted-foreground text-sm line-through tabular-nums'>
-                  {money.format(product.compareAt)}
-                </p>
-              ) : null}
-              {discount ? (
-                <Badge variant='secondary' className='rounded-full font-normal'>{`${discount}% de descuento`}</Badge>
-              ) : null}
-              <p className='text-muted-foreground flex items-center gap-1.5 text-sm'>
-                {/*
-                  Rating stars use the foreground token so they inherit theme contrast,
-                  matching storefront-hero-1 and review-rating-1. The rating number sits
-                  right beside the star, so the star is never the only carrier.
-                */}
-                <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>
-            </div>
-
-            <p className='text-muted-foreground mt-4 text-sm leading-6 text-pretty'>{product.description}</p>
-
-            <div className='mt-5 flex flex-col gap-5'>
-              {product.variants.map(variant => (
-                /*
-                  A fieldset per variant, and a ToggleGroup inside it rather than a row of
-                  Buttons with a hand-rolled `aria-pressed`. A loop of buttons has to fake single
-                  selection and roving focus, and gets the focus order wrong the moment one of
-                  them is disabled — which, with a sold-out finish, is most of them.
-                */
-                <fieldset key={variant.key}>
-                  <legend className='flex w-full items-baseline gap-2 text-sm font-medium'>
-                    {variant.label}
-                    <span className='text-muted-foreground font-normal'>
-                      {variant.options.find(option => option.value === selection[variant.key])?.label}
-                    </span>
-                  </legend>
-
-                  <ToggleGroup
-                    type='multiple'
-                    spacing={2}
-                    variant='outline'
-                    value={[selection[variant.key] ?? '']}
-                    onValueChange={value =>
-                      value[0] && setSelection(current => ({ ...current, [variant.key]: value[0] }))
-                    }
-                    aria-label={variant.label}
-                    className='mt-2 flex-wrap'
-                  >
-                    {variant.options.map(option => (
-                      <ToggleGroupItem
-                        key={option.value}
-                        value={option.value}
-                        disabled={!option.available}
-                        // Sold out is a word, not just a dimmed control.
-                        aria-label={option.available ? option.label : `${option.label}, agotado`}
-                        className='data-[state=on]:border-primary data-[state=on]:ring-primary/30 gap-2 data-[state=on]:ring-2'
-                      >
-                        {option.swatch ? (
-                          <span
-                            aria-hidden='true'
-                            className='ring-border size-3 rounded-full ring-1'
-                            style={{ backgroundColor: option.swatch }}
-                          />
-                        ) : null}
-                        {option.label}
-                      </ToggleGroupItem>
-                    ))}
-                  </ToggleGroup>
-                </fieldset>
-              ))}
-            </div>
-
-            <div className='mt-6 flex flex-wrap items-center gap-3'>
-              {/*
-                A ButtonGroup, so the stepper's shared border, its corner radii and its focus
-                stacking come from the component rather than from `rounded-r-none` by hand.
-
-                The readout is a `ButtonGroupText`, not a bare div. The group styles its children
-                through `[&>[data-slot]…]` selectors, so an element without a `data-slot` is
-                invisible to every one of them: it kept its own radius, lost no border where the
-                group expected a seam, and threw off which child counted as last - which is the
-                detached middle box with a stray rule under it.
-              */}
-              <ButtonGroup aria-label='Cantidad'>
-                <Button
-                  variant='outline'
-                  size='icon'
-                  aria-label='Reducir cantidad'
-                  disabled={quantity <= 1}
-                  onClick={() => setQuantity(current => Math.max(1, current - 1))}
-                >
-                  <Minus />
-                </Button>
-                {/*
-                  `aria-live` rather than a label: the number changes under the reader's own
-                  button presses, and announcing it is the only way they hear the result.
-                */}
-                <ButtonGroupText aria-live='polite' className='bg-background min-w-10 justify-center tabular-nums'>
-                  {quantity}
-                </ButtonGroupText>
-                <Button
-                  variant='outline'
-                  size='icon'
-                  aria-label='Aumentar cantidad'
-                  onClick={() => setQuantity(current => current + 1)}
-                >
-                  <Plus />
-                </Button>
-              </ButtonGroup>
-
-              <Button
-                className='flex-1'
-                onClick={() => {
-                  setAddedCount(quantity)
-                  onAddToCart?.(product, quantity, selection)
-                }}
-              >
-                {addedCount > 0 ? (
-                  <>
-                    <Check aria-hidden='true' />
-                    Añadido al carrito
-                  </>
-                ) : (
-                  `Añadir al carrito · ${money.format(product.price * quantity)}`
-                )}
-              </Button>
-            </div>
-
-            {product.unitsLeft ? (
-              <p className='text-muted-foreground mt-3 text-xs'>
-                {`Solo quedan ${product.unitsLeft} en ${selectionSummary || 'esta opción'}.`}
-              </p>
-            ) : null}
-
-            {/* The one announcement, off-screen, that the visible confirmation stands in for. */}
-            <p role='status' aria-live='polite' className='sr-only'>
-              {addedCount > 0 ? `${addedCount} × ${product.name}, ${selectionSummary}, añadido a tu carrito` : ''}
-            </p>
-
-            <Separator className='mt-6' />
-
-            <ul className='text-muted-foreground mt-4 grid gap-1.5 text-sm sm:grid-cols-2'>
-              {product.details.map(detail => (
-                <li key={detail} className='flex items-start gap-2'>
-                  <Check className='text-primary mt-0.5 size-3.5 shrink-0' aria-hidden='true' />
-                  {detail}
-                </li>
-              ))}
-            </ul>
-
-            {product.href ? (
-              <a
-                href={product.href}
-                className='text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 mt-5 w-fit rounded-sm text-sm underline underline-offset-4 outline-none focus-visible:ring-[3px]'
-              >
-                Ver la página completa del producto
-              </a>
-            ) : null}
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export default ProductQuickViewDialog

package/src/blocks/e-commerce/product-overview/product-quick-view.tsx

@@ -1,136 +0,0 @@
-'use client'
-
-import { useId, useState } from 'react'
-
-import { Badge } from '../../../ui/badge'
-
-import { ProductQuickViewCard } from './product-quick-view-card'
-import { ProductQuickViewDialog } from './product-quick-view-dialog'
-
-export interface QuickViewOption {
-  value: string
-  label: string
-  available: boolean
-  /**
-   * A literal colour for a swatch, when the option is one.
-   *
-   * Finish colours are product data, not theme data: brass has to stay brass whatever preset the
-   * customizer is on. It is the one place in the block that is not a token, and the option's
-   * label always carries the same information in words.
-   */
-  swatch?: string
-}
-
-export interface QuickViewVariant {
-  key: string
-  label: string
-  /**
-   * Which option a product opens on.
-   *
-   * Not simply the first available one: sizes are listed smallest first, and the sofa is sold as
-   * the size its name promises, so the panel would otherwise open on an option that disagrees
-   * with the card the reader just pressed.
-   */
-  defaultValue?: string
-  options: QuickViewOption[]
-}
-
-export interface QuickViewProduct {
-  id: string
-  name: string
-  /** The one line that says what it is, under the name on the card and in the panel. */
-  tagline: string
-  category: string
-  price: number
-  compareAt?: number
-  rating: number
-  reviewCount: number
-  /** In stock, and low enough to be worth saying. Omitted when there is plenty. */
-  unitsLeft?: number
-  image: string
-  imageAlt: string
-  description: string
-  /** The panel shows these as a list, not as a specification table. */
-  details: string[]
-  variants: QuickViewVariant[]
-  /** Where the full product page lives. The panel only links to it when set. */
-  href?: string
-}
-
-export interface ProductQuickViewProps {
-  products: QuickViewProduct[]
-  eyebrow?: string
-  heading?: string
-  lede?: string
-  /**
-   * Called with the chosen options when the reader adds to cart. When absent the button still
-   * shows and keeps its added-to-cart confirmation; it just has nowhere to report to.
-   */
-  onAddToCart?: (
-    product: QuickViewProduct,
-    quantity: number,
-    selection: Record<string, string>
-  ) => void
-}
-
-/**
- * A product grid whose point is the panel that opens over it.
- *
- * One dialog serves the whole catalogue rather than one per card: the panel steps between
- * products from inside, the card it is showing stays lit underneath, and closing puts the reader
- * back exactly where the grid says they are.
- */
-export function ProductQuickView({
-  products,
-  eyebrow = 'Novedades de la temporada',
-  heading = 'Todo lo que vale la pena saber, sin salir de la rejilla',
-  lede = 'Abre cualquier pieza para ver sus acabados, sus medidas y la respuesta a la pregunta que, de otro modo, te enviaría a la página del producto. Recorre el resto de la habitación desde dentro.',
-  onAddToCart,
-}: ProductQuickViewProps) {
-  const [activeIndex, setActiveIndex] = useState<number | null>(null)
-  // A reusable block cannot carry a fixed heading id: two instances on a page would both claim it.
-  const headingId = useId()
-
-  return (
-    <section aria-labelledby={headingId} className='bg-background w-full py-16 sm:py-24'>
-      <div className='mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8'>
-        <div className='flex max-w-2xl flex-col items-start'>
-          <Badge variant='outline' className='gap-2 rounded-full px-3'>
-            <span aria-hidden='true' className='bg-primary size-1.5 rounded-full' />
-            {eyebrow}
-          </Badge>
-
-          <h2
-            id={headingId}
-            className='mt-5 text-3xl font-semibold tracking-tight text-balance sm:text-4xl'
-          >
-            {heading}
-          </h2>
-
-          <p className='text-muted-foreground mt-4 text-base text-pretty'>{lede}</p>
-        </div>
-
-        <div className='mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2 md:grid-cols-3 lg:mt-12'>
-          {products.map((product, index) => (
-            <ProductQuickViewCard
-              key={product.id}
-              product={product}
-              isActive={activeIndex === index}
-              onOpen={() => setActiveIndex(index)}
-            />
-          ))}
-        </div>
-      </div>
-
-      <ProductQuickViewDialog
-        products={products}
-        activeIndex={activeIndex}
-        onActiveIndexChange={setActiveIndex}
-        onClose={() => setActiveIndex(null)}
-        onAddToCart={onAddToCart}
-      />
-    </section>
-  )
-}
-
-export default ProductQuickView