ProductQuickView

'use client'
import { useState } from 'react'

const images = ['🖥️', '💻', '⌨️', '🖱️']
const colors = [{ name: 'Space Gray', hex: '#4a4a4a' }, { name: 'Silver', hex: '#c0c0c0' }, { name: 'Gold', hex: '#C9A84C' }]
const sizes = ['8GB / 256GB', '16GB / 512GB', '32GB / 1TB']

export default function ProductQuickView() {
  const [open, setOpen] = useState(false)
  const [imgIdx, setImgIdx] = useState(0)
  const [color, setColor] = useState(0)
  const [size, setSize] = useState(1)
  const [qty, setQty] = useState(1)
  const [added, setAdded] = useState(false)

  function addToCart() {
    setAdded(true)
    setTimeout(() => setAdded(false), 2000)
  }

  return (
    <div style={{ padding: 48, background: '#0A0A0A', display: 'flex', justifyContent: 'center' }}>
      <button onClick={() => setOpen(true)} style={{
        background: '#C9A84C', color: '#0A0A0A', border: 'none',
        padding: '12px 24px', borderRadius: 8, cursor: 'pointer', fontWeight: 700, fontSize: 14,
      }}>Quick View Product</button>

      {open && (
        <div onClick={() => setOpen(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.8)', backdropFilter: 'blur(8px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}>
          <div onClick={e => e.stopPropagation()} style={{ background: '#111', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 20, width: '100%', maxWidth: 720, display: 'grid', gridTemplateColumns: '1fr 1fr', overflow: 'hidden' }}>
            {/* Images */}
            <div style={{ background: '#0d0d0d', padding: 32, display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{ fontSize: 100, textAlign: 'center', padding: '20px 0' }}>{images[imgIdx]}</div>
              <div style={{ display: 'flex', gap: 8, justifyContent: 'center' }}>
                {images.map((img, i) => (
                  <button key={i} onClick={() => setImgIdx(i)} style={{
                    width: 48, height: 48, border: `2px solid ${i === imgIdx ? '#C9A84C' : 'rgba(255,255,255,0.1)'}`,
                    borderRadius: 8, background: '#111', cursor: 'pointer', fontSize: 24,
                  }}>{img}</button>
                ))}
              </div>
            </div>

            {/* Info */}
            <div style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 20 }}>
              <button onClick={() => setOpen(false)} style={{ alignSelf: 'flex-end', background: 'rgba(255,255,255,0.06)', border: 'none', color: '#aaa', width: 30, height: 30, borderRadius: 6, cursor: 'pointer' }}>✕</button>
              <div>
                <div style={{ color: '#C9A84C', fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 4 }}>MacBook Pro</div>
                <div style={{ color: '#F5F5F0', fontSize: 22, fontWeight: 800 }}>Apple M4 Pro Chip</div>
                <div style={{ color: '#C9A84C', fontSize: 24, fontWeight: 900, marginTop: 8 }}>$1,999</div>
              </div>

              <div>
                <div style={{ color: '#aaa', fontSize: 13, marginBottom: 10 }}>Color: {colors[color].name}</div>
                <div style={{ display: 'flex', gap: 8 }}>
                  {colors.map((c, i) => (
                    <button key={i} onClick={() => setColor(i)} style={{
                      width: 28, height: 28, borderRadius: '50%', background: c.hex, cursor: 'pointer',
                      border: `3px solid ${i === color ? '#F5F5F0' : 'transparent'}`,
                      outline: `2px solid ${i === color ? c.hex : 'transparent'}`, outlineOffset: 2,
                    }} />
                  ))}
                </div>
              </div>

              <div>
                <div style={{ color: '#aaa', fontSize: 13, marginBottom: 10 }}>Configuration</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {sizes.map((s, i) => (
                    <button key={i} onClick={() => setSize(i)} style={{
                      background: i === size ? 'rgba(201,168,76,0.1)' : 'rgba(255,255,255,0.04)',
                      border: `1px solid ${i === size ? '#C9A84C' : 'rgba(255,255,255,0.08)'}`,
                      color: i === size ? '#C9A84C' : '#aaa', padding: '8px 12px', borderRadius: 8,
                      cursor: 'pointer', fontSize: 13, textAlign: 'left',
                    }}>{s}</button>
                  ))}
                </div>
              </div>

              <div style={{ display: 'flex', gap: 10 }}>
                <div style={{ display: 'flex', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 8, overflow: 'hidden' }}>
                  <button onClick={() => setQty(q => Math.max(1, q - 1))} style={{ background: 'transparent', border: 'none', color: '#aaa', padding: '0 14px', cursor: 'pointer', fontSize: 18 }}>−</button>
                  <div style={{ color: '#F5F5F0', padding: '10px 16px', minWidth: 40, textAlign: 'center' }}>{qty}</div>
                  <button onClick={() => setQty(q => q + 1)} style={{ background: 'transparent', border: 'none', color: '#aaa', padding: '0 14px', cursor: 'pointer', fontSize: 18 }}>+</button>
                </div>
                <button onClick={addToCart} style={{
                  flex: 1, background: added ? 'rgba(34,197,94,0.15)' : '#C9A84C',
                  border: added ? '1px solid rgba(34,197,94,0.4)' : 'none',
                  color: added ? '#22c55e' : '#0A0A0A', borderRadius: 8,
                  cursor: 'pointer', fontWeight: 700, fontSize: 14, transition: 'all 0.2s',
                }}>{added ? '✓ Added to cart' : 'Add to cart'}</button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

Component info

About

Product quick-view modal with image gallery, variant selection, and add to cart