Product Detail Page

Installation

Variants

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface ProductVariant {
  id: string
  name: string
  colorHex: string
  sku: string
  inStock: boolean
  stockCount: number
  price: number
  originalPrice: number
  images: { id: string; url: string; alt: string }[]
}

Files installed (2)

• components/blocks/ProductDetailPage.tsx2.5 kB

  Copy

  'use client'
  
  import * as React from 'react'
  import { ChevronRight } from 'lucide-react'
  
  // Import sub-blocks
  import { FlashSaleOfferBar } from '../flash-sale-offer-bar'
  import { TechnicalSpecsSheet } from '../technical-specs-sheet'
  import { ProductQaCommunity } from '../product-qa-community'
  import { CustomerReviews } from '../customer-reviews'
  import { FrequentlyBoughtTogether } from '../frequently-bought-together'
  import { ProductGalleryBuyBox, variants } from './ProductGalleryBuyBox'
  
  export function ProductDetailPage() {
    const [selectedVariantId, setSelectedVariantId] = React.useState(variants[0].id)
  
    const currentVariant = variants.find((v) => v.id === selectedVariantId) || variants[0]
  
    return (
      <div data-slot="product-detail-page" className="bg-background text-foreground w-full space-y-10">
        {/* Breadcrumb Navigation Bar */}
        <nav className="text-muted-foreground flex items-center gap-1.5 text-xs">
          <span className="hover:text-foreground cursor-pointer">Storefront</span>
          <ChevronRight className="size-3.5" />
          <span className="hover:text-foreground cursor-pointer">Pro Audio & Reference</span>
          <ChevronRight className="size-3.5" />
          <span className="hover:text-foreground cursor-pointer">Planar Magnetic</span>
          <ChevronRight className="size-3.5" />
          <span className="text-foreground font-medium">APX-950-PRO Reference Monitor</span>
        </nav>
  
        {/* Main Hero Split: Gallery & Buy Box */}
        <ProductGalleryBuyBox selectedVariantId={selectedVariantId} onSelectVariant={setSelectedVariantId} />
  
        {/* Section 2: Flash Sale & Multi-Buy Tier Deal Bar */}
        <div className="space-y-3">
          <FlashSaleOfferBar
            saleTitle="Audio Pro Week: Limited Master Batch 04"
            claimedPercent={82}
            itemsLeft={currentVariant.stockCount}
          />
        </div>
  
        {/* Section 3: Frequently Bought Together Bundle */}
        <div className="space-y-4">
          <FrequentlyBoughtTogether />
        </div>
  
        {/* Section 4: Engineering & Technical Specifications Sheet */}
        <div className="space-y-4">
          <TechnicalSpecsSheet modelNumber="APX-950-PRO" revision="Studio Edition 2026" />
        </div>
  
        {/* Section 5: Verified Customer Reviews & Photo Breakdown */}
        <div className="space-y-4">
          <CustomerReviews />
        </div>
  
        {/* Section 6: Customer & Staff Q&A Community */}
        <div className="space-y-4">
          <ProductQaCommunity productName="Apex Pro Reference Planar Headphones" />
        </div>
      </div>
    )
  }
  

• components/blocks/ProductGalleryBuyBox.tsx17.9 kB

  Copy

Raw manifest:https://uipkge.dev/r/react/product-detail-page.json