Quick View

Standalone modal (components/blocks/quick-view-modal.tsx) — portal-rendered to the document body, closes on Escape or backdrop click, locks body scroll while open, and resets its size/quantity/image state each time it reopens. Triggered from Product Card's hover overlay, but independently reusable anywhere a product needs a fast preview.

Composed ofBadge Button Rating

Configurator

TitlePriceTag label

Usage

<QuickViewModal
  open={open}
  onClose={() => setOpen(false)}
  data={{
    title: "Hyaluronic Acid 2% + B5 (with Ceramides)",
    price: "$9.90 USD",
    tagLabel: "Our Most-Loved Hydrating Serum",
    // ...images, rating, targets, sizes, etc.
  }}
/>

Props

Prop	Type	Default	Description
open	boolean	—	Controls visibility; the component itself owns no open state.
onClose	() => void	—	Called on Escape, backdrop click, or the close button.
data	QuickViewData	—	Images, title, price, rating, targets/format/ingredients fields, sizes, and an optional productHref.

Do's and Don'ts

·Let the modal own its own portal/scroll-lock/Escape behavior — just toggle the open prop from the parent.
·Reset any parent-side selection state when data changes between opens, the same way the modal resets its own size/quantity internally.

Don't

·Don't render more than one QuickViewModal open at a time on a page — stack them and only one should be visible.
·Don't skip productHref if a real PDP exists; leaving it out just hides the "View full product details" link, it doesn't break anything, but it's an easy detail to forget.