x
This commit is contained in:
Your Name committed
1 parent
731fa00fab
commit
34be2599fa
5 files changed
+918
-78
No files matched your search
@@ -0,0 +1,326 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import {
|
||||
X,
|
||||
Sparkles,
|
||||
LayoutGrid,
|
||||
ListFilter,
|
||||
Maximize2,
|
||||
Check,
|
||||
Loader2,
|
||||
SlidersHorizontal,
|
||||
Info
|
||||
} from 'lucide-react'
|
||||
import { API_BASE, type Product } from '@homaroma/types'
|
||||
|
||||
export type OptionDisplayType = 'auto' | 'pills' | 'dropdown' | 'modal'
|
||||
|
||||
interface OptionConfig {
|
||||
name: any
|
||||
values: any[]
|
||||
displayType?: OptionDisplayType
|
||||
}
|
||||
|
||||
interface Props {
|
||||
isOpen: boolean
|
||||
product: Product | null
|
||||
onClose: () => void
|
||||
onSaveSuccess: (updatedProduct: Product) => void
|
||||
}
|
||||
|
||||
function getOptionLabel(nameObj: any): string {
|
||||
if (!nameObj) return 'Option'
|
||||
if (typeof nameObj === 'string') return nameObj
|
||||
return nameObj.th || nameObj.en || Object.values(nameObj)[0] || 'Option'
|
||||
}
|
||||
|
||||
function getValueLabel(valObj: any): string {
|
||||
if (!valObj) return ''
|
||||
if (typeof valObj === 'string') return valObj
|
||||
return valObj.th || valObj.en || Object.values(valObj)[0] || ''
|
||||
}
|
||||
|
||||
const DISPLAY_OPTIONS: Array<{
|
||||
type: OptionDisplayType
|
||||
title: string
|
||||
subtitle: string
|
||||
icon: React.ComponentType<{ className?: string }>
|
||||
badgeText: string
|
||||
badgeColor: string
|
||||
}> = [
|
||||
{
|
||||
type: 'auto',
|
||||
title: 'Auto (Smart Adaptive)',
|
||||
subtitle: 'ระบบเลือกให้อัตโนมัติ: มี Swatch จะแสดงกล่องสี, ≤ 8 ตัวเลือกแสดงปุ่มกด, > 8 ตัวเลือกสลับเป็น Dropdown',
|
||||
icon: Sparkles,
|
||||
badgeText: 'แนะนำ',
|
||||
badgeColor: 'bg-cyan-glow/15 text-cyan-glow border-cyan-glow/30'
|
||||
},
|
||||
{
|
||||
type: 'pills',
|
||||
title: '1. แบบเดิม (Pills / Swatches)',
|
||||
subtitle: 'ปุ่มกดเรียงกันแบบ Flex-wrap ทุกตัวเลือก เหมาะกับตัวเลือกน้อย (2–8 ตัวเลือก เช่น Size S/M/L/XL)',
|
||||
icon: LayoutGrid,
|
||||
badgeText: 'ปุ่มกด',
|
||||
badgeColor: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30'
|
||||
},
|
||||
{
|
||||
type: 'dropdown',
|
||||
title: '2. Searchable Dropdown',
|
||||
subtitle: 'กล่อง Dropdown กะทัดรัด เมื่อคลิกจะกางเมนูพร้อมช่องค้นหา เหมาะกับตัวเลือกปานกลาง (10–30 ตัวเลือก)',
|
||||
icon: ListFilter,
|
||||
badgeText: 'Dropdown',
|
||||
badgeColor: 'bg-amber-500/15 text-amber-400 border-amber-500/30'
|
||||
},
|
||||
{
|
||||
type: 'modal',
|
||||
title: '3. Modal Dialog / Bottom Sheet',
|
||||
subtitle: 'ปุ่มกดเปิดหน้าต่าง Pop-up กลางจอ (Desktop) หรือ Bottom Sheet (Mobile) ค้นหาเต็มตา เหมาะกับตัวเลือกเยอะมาก (30–100+ ตัวเลือก)',
|
||||
icon: Maximize2,
|
||||
badgeText: 'Modal ค้นหา',
|
||||
badgeColor: 'bg-purple-500/15 text-purple-400 border-purple-500/30'
|
||||
}
|
||||
]
|
||||
|
||||
export default function ProductOptionUxModal({ isOpen, product, onClose, onSaveSuccess }: Props) {
|
||||
const [optionsConfig, setOptionsConfig] = useState<OptionConfig[]>([])
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!product) {
|
||||
setOptionsConfig([])
|
||||
return
|
||||
}
|
||||
const rawOptions = (product.options as any[]) || []
|
||||
setOptionsConfig(
|
||||
rawOptions.map(opt => ({
|
||||
name: opt.name,
|
||||
values: opt.values || [],
|
||||
displayType: (opt.displayType as OptionDisplayType) || 'auto'
|
||||
}))
|
||||
)
|
||||
setError(null)
|
||||
}, [product, isOpen])
|
||||
|
||||
if (!isOpen || !product) return null
|
||||
|
||||
const handleTypeChange = (optIndex: number, type: OptionDisplayType) => {
|
||||
setOptionsConfig(prev => {
|
||||
const next = [...prev]
|
||||
next[optIndex] = { ...next[optIndex], displayType: type }
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
setSaving(true)
|
||||
setError(null)
|
||||
|
||||
const payloadOptions = optionsConfig.map(opt => ({
|
||||
name: opt.name,
|
||||
values: opt.values,
|
||||
displayType: opt.displayType
|
||||
}))
|
||||
|
||||
const res = await fetch(`${API_BASE}/products/${product.id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
options: payloadOptions
|
||||
})
|
||||
})
|
||||
|
||||
if (!res.ok) {
|
||||
const errJson = await res.json().catch(() => ({}))
|
||||
throw new Error(errJson.message || `บันทึกไม่สำเร็จ (Status ${res.status})`)
|
||||
}
|
||||
|
||||
const data = await res.json()
|
||||
const updatedProduct = data.product || { ...product, options: payloadOptions }
|
||||
onSaveSuccess(updatedProduct)
|
||||
onClose()
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'เกิดข้อผิดพลาดในการบันทึก')
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const rawName = product.name
|
||||
const resolvedName = typeof rawName === 'string' ? rawName : (rawName?.th || rawName?.en || Object.values(rawName || {})[0] || '')
|
||||
const productName = resolvedName || (product.brand?.name ? `${product.brand.name} Product` : `Product #${product.id}`)
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-md animate-fade-in">
|
||||
<div
|
||||
className="w-full max-w-2xl bg-night-900 border border-white/10 rounded-3xl p-6 shadow-2xl space-y-6 max-h-[90vh] overflow-y-auto custom-scrollbar"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between gap-4 pb-4 border-b border-white/10">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-3 rounded-2xl bg-cyan-glow/10 border border-cyan-glow/20 text-cyan-glow">
|
||||
<SlidersHorizontal className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-white flex items-center gap-2">
|
||||
ตั้งค่ารูปแบบการเลือก Option (UX/UI Selector)
|
||||
</h2>
|
||||
<p className="text-xs text-slate-400 mt-0.5 line-clamp-1">
|
||||
{productName}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 rounded-xl text-slate-400 hover:text-white hover:bg-white/5 transition-all cursor-pointer"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Options List */}
|
||||
{optionsConfig.length === 0 ? (
|
||||
<div className="py-12 text-center space-y-3">
|
||||
<div className="w-12 h-12 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center mx-auto text-slate-500">
|
||||
<Info className="w-6 h-6" />
|
||||
</div>
|
||||
<p className="text-sm font-semibold text-slate-300">สินค้านี้ไม่มีตัวเลือก (Options / Variants)</p>
|
||||
<p className="text-xs text-slate-500 max-w-sm mx-auto">
|
||||
สินค้านี้เป็นสินค้าเดี่ยวที่ไม่มีตัวเลือกขนาด สี หรือรุ่น จึงไม่ต้องตั้งค่า Option UX/UI
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{optionsConfig.map((opt, optIdx) => {
|
||||
const optLabel = getOptionLabel(opt.name)
|
||||
const count = opt.values.length
|
||||
const currentType = opt.displayType || 'auto'
|
||||
|
||||
return (
|
||||
<div key={optIdx} className="p-5 rounded-2xl bg-night-950 border border-white/10 space-y-4">
|
||||
{/* Option Header */}
|
||||
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs uppercase font-mono tracking-wider px-2 py-0.5 rounded-md bg-white/5 text-slate-400 border border-white/10">
|
||||
Option {optIdx + 1}
|
||||
</span>
|
||||
<h3 className="text-sm font-bold text-white">
|
||||
{optLabel}
|
||||
</h3>
|
||||
<span className="text-xs text-cyan-glow font-semibold px-2 py-0.5 rounded-full bg-cyan-glow/10 border border-cyan-glow/20">
|
||||
{count} ตัวเลือก
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Quick values preview */}
|
||||
<div className="text-[11px] text-slate-400 max-w-xs truncate">
|
||||
ตัวอย่าง: {opt.values.slice(0, 3).map(getValueLabel).join(', ')}{count > 3 ? ` ... (+${count - 3})` : ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Selector Style Cards */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">
|
||||
{DISPLAY_OPTIONS.map((style) => {
|
||||
const Icon = style.icon
|
||||
const isSelected = currentType === style.type
|
||||
|
||||
return (
|
||||
<button
|
||||
key={style.type}
|
||||
type="button"
|
||||
onClick={() => handleTypeChange(optIdx, style.type)}
|
||||
className={`relative text-left p-3.5 rounded-2xl border transition-all cursor-pointer flex flex-col justify-between gap-2.5 ${
|
||||
isSelected
|
||||
? 'border-cyan-glow bg-cyan-glow/10 ring-1 ring-cyan-glow/30 shadow-lg shadow-cyan-glow/10'
|
||||
: 'border-white/10 bg-white/[0.02] hover:bg-white/[0.05] hover:border-white/20'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`p-1.5 rounded-lg border ${
|
||||
isSelected ? 'bg-cyan-glow/20 text-cyan-glow border-cyan-glow/30' : 'bg-white/5 text-slate-400 border-white/10'
|
||||
}`}>
|
||||
<Icon className="w-4 h-4" />
|
||||
</div>
|
||||
<span className={`text-xs font-bold ${isSelected ? 'text-white' : 'text-slate-300'}`}>
|
||||
{style.title}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span className={`text-[10px] font-bold px-2 py-0.5 rounded-full border ${style.badgeColor}`}>
|
||||
{style.badgeText}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="text-[11px] leading-relaxed text-slate-400 line-clamp-3">
|
||||
{style.subtitle}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-between pt-1 border-t border-white/5">
|
||||
<span className="text-[10px] text-slate-500 font-medium">
|
||||
{isSelected ? 'กำลังเลือกรูปแบบนี้' : 'คลิกเพื่อเลือก'}
|
||||
</span>
|
||||
{isSelected && (
|
||||
<div className="w-4 h-4 rounded-full bg-cyan-glow text-night-950 flex items-center justify-center">
|
||||
<Check className="w-3 h-3 stroke-[3]" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error Feedback */}
|
||||
{error && (
|
||||
<div className="p-3 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs flex items-center gap-2">
|
||||
<X className="w-4 h-4 shrink-0" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between gap-3 pt-4 border-t border-white/10">
|
||||
<p className="text-xs text-slate-500 hidden sm:block">
|
||||
* การตั้งค่านี้จะมีผลกับหน้า Storefront ของสินค้านี้ทันที
|
||||
</p>
|
||||
<div className="flex items-center gap-3 w-full sm:w-auto justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={saving}
|
||||
className="px-4 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 text-slate-400 hover:text-white text-xs font-semibold cursor-pointer transition-all"
|
||||
>
|
||||
ยกเลิก
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
disabled={saving || optionsConfig.length === 0}
|
||||
className="flex items-center gap-2 px-6 py-2.5 rounded-xl bg-gradient-to-r from-cyan-glow to-blue-500 hover:from-cyan-400 hover:to-blue-400 text-night-950 font-bold text-xs shadow-lg shadow-cyan-glow/20 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer transition-all"
|
||||
>
|
||||
{saving ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
<span>กำลังบันทึก...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Check className="w-4 h-4" />
|
||||
<span>บันทึกการตั้งค่า</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -16,12 +16,14 @@ import {
|
||||
FileJson,
|
||||
Download,
|
||||
CheckCircle2,
|
||||
Sparkles
|
||||
Sparkles,
|
||||
SlidersHorizontal
|
||||
} from 'lucide-react'
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { API_BASE, getCategoryImage, formatPrice, type Category, type Product } from '@homaroma/types'
|
||||
import ProductJsonGuideModal from '../components/ProductJsonGuideModal'
|
||||
import ProductOptionUxModal from '../components/products/ProductOptionUxModal'
|
||||
|
||||
|
||||
interface PaginationMeta {
|
||||
@@ -58,6 +60,10 @@ export default function ProductsPage() {
|
||||
const [isGuideModalOpen, setIsGuideModalOpen] = useState(false)
|
||||
const [importJsonText, setImportJsonText] = useState('')
|
||||
const [importLoading, setImportLoading] = useState(false)
|
||||
|
||||
// Option UX/UI Selector Modal State
|
||||
const [optionUxProduct, setOptionUxProduct] = useState<Product | null>(null)
|
||||
const [isOptionUxModalOpen, setIsOptionUxModalOpen] = useState(false)
|
||||
const [importError, setImportError] = useState<string | null>(null)
|
||||
const [importSuccessMessage, setImportSuccessMessage] = useState<string | null>(null)
|
||||
|
||||
@@ -649,6 +655,16 @@ export default function ProductsPage() {
|
||||
>
|
||||
<LayoutTemplate className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setOptionUxProduct(product)
|
||||
setIsOptionUxModalOpen(true)
|
||||
}}
|
||||
title={t('products.optionUxSelector', 'Option UX/UI Selector (ตั้งค่ารูปแบบการเลือก Option)')}
|
||||
className="p-2 rounded-lg hover:bg-cyan-glow/10 text-slate-500 hover:text-cyan-glow transition-all cursor-pointer"
|
||||
>
|
||||
<SlidersHorizontal className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => navigate(`/products/${product.id}/edit`)}
|
||||
title={t('products.editProduct', 'Edit Product')}
|
||||
@@ -1053,6 +1069,19 @@ export default function ProductsPage() {
|
||||
onOpenImport={() => setIsImportModalOpen(true)}
|
||||
/>
|
||||
|
||||
{/* Product Option UX/UI Selector Modal */}
|
||||
<ProductOptionUxModal
|
||||
isOpen={isOptionUxModalOpen}
|
||||
product={optionUxProduct}
|
||||
onClose={() => {
|
||||
setIsOptionUxModalOpen(false)
|
||||
setOptionUxProduct(null)
|
||||
}}
|
||||
onSaveSuccess={(updatedProduct) => {
|
||||
setProducts(prev => prev.map(p => p.id === updatedProduct.id ? { ...p, options: updatedProduct.options } : p))
|
||||
}}
|
||||
/>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -181,12 +181,11 @@ function ProductMainSection({
|
||||
</nav>
|
||||
)}
|
||||
|
||||
<section className="grid gap-10 md:grid-cols-2 md:items-stretch md:gap-16">
|
||||
<section className="grid gap-10 md:grid-cols-2 md:items-start md:gap-16">
|
||||
<ProductGallery
|
||||
images={galleryImages}
|
||||
productName={productName}
|
||||
categoryName={categoryName}
|
||||
stretchDesktop
|
||||
/>
|
||||
|
||||
<AddToCartSection product={product} showBrandMeta={showBrandMeta} />
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useMemo } from 'react'
|
||||
import { useState, useMemo, useRef, useEffect } from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from './LocalizedLink'
|
||||
import { getCategoryImage, formatPrice, type Product } from '@homaroma/types'
|
||||
@@ -17,7 +17,11 @@ import {
|
||||
Truck,
|
||||
ShieldCheck,
|
||||
RotateCcw,
|
||||
MessageCircle
|
||||
MessageCircle,
|
||||
Search,
|
||||
ChevronDown,
|
||||
Check,
|
||||
X
|
||||
} from 'lucide-react'
|
||||
|
||||
function getBaseString(val: any): string {
|
||||
@@ -219,6 +223,461 @@ const UI_TRANSLATIONS: Record<string, {
|
||||
},
|
||||
}
|
||||
|
||||
function SearchableOptionSelect({
|
||||
optionName,
|
||||
values,
|
||||
selectedValue,
|
||||
onSelect,
|
||||
isOptionAvailable,
|
||||
lang,
|
||||
optionsMeta,
|
||||
}: {
|
||||
optionName: string
|
||||
values: any[]
|
||||
selectedValue: string
|
||||
onSelect: (val: string) => void
|
||||
isOptionAvailable: (val: string) => boolean
|
||||
lang: string
|
||||
optionsMeta: any[] | null | undefined
|
||||
}) {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const containerRef = useRef<HTMLDivElement | null>(null)
|
||||
const inputRef = useRef<HTMLInputElement | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false)
|
||||
}
|
||||
}
|
||||
if (isOpen) {
|
||||
document.addEventListener('mousedown', handleClickOutside)
|
||||
setTimeout(() => inputRef.current?.focus(), 50)
|
||||
}
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside)
|
||||
}
|
||||
}, [isOpen])
|
||||
|
||||
useEffect(() => {
|
||||
function handleKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape' && isOpen) {
|
||||
setIsOpen(false)
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
return () => window.removeEventListener('keydown', handleKeyDown)
|
||||
}, [isOpen])
|
||||
|
||||
const selectedDisplayVal = useMemo(() => {
|
||||
if (!selectedValue) return ''
|
||||
return resolveOptionValue(selectedValue, optionsMeta, lang)
|
||||
}, [selectedValue, optionsMeta, lang])
|
||||
|
||||
const isCurrentAvailable = useMemo(() => {
|
||||
if (!selectedValue) return false
|
||||
return isOptionAvailable(selectedValue)
|
||||
}, [selectedValue, isOptionAvailable])
|
||||
|
||||
const filteredValues = useMemo(() => {
|
||||
const q = searchQuery.trim().toLowerCase()
|
||||
return values
|
||||
.map(val => {
|
||||
const baseVal = getBaseString(val)
|
||||
const displayVal = resolveLocalized(val, lang)
|
||||
const available = isOptionAvailable(baseVal)
|
||||
return { baseVal, displayVal, available }
|
||||
})
|
||||
.filter(item => {
|
||||
if (!q) return true
|
||||
return (
|
||||
item.displayVal.toLowerCase().includes(q) ||
|
||||
item.baseVal.toLowerCase().includes(q)
|
||||
);
|
||||
});
|
||||
}, [values, searchQuery, lang, isOptionAvailable])
|
||||
|
||||
const placeholderText = useMemo(() => {
|
||||
switch (lang.slice(0, 2)) {
|
||||
case 'th': return `ค้นหา หรือเลือกรุ่น (${values.length} รายการ)...`
|
||||
case 'ja': return `オプションを検索または選択 (${values.length}件)...`
|
||||
case 'zh': return `搜索或选择规格 (${values.length} 项)...`
|
||||
default: return `Search or select option (${values.length} items)...`
|
||||
}
|
||||
}, [lang, values.length])
|
||||
|
||||
const emptyText = useMemo(() => {
|
||||
switch (lang.slice(0, 2)) {
|
||||
case 'th': return 'ไม่พบตัวเลือกที่ตรงกับคำค้นหา'
|
||||
case 'ja': return '該当するオプションが見つかりません'
|
||||
case 'zh': return '未找到匹配的规格'
|
||||
default: return 'No matching options found'
|
||||
}
|
||||
}, [lang])
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className="relative w-full space-y-2">
|
||||
{/* Trigger Button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen(prev => !prev)}
|
||||
className={`w-full flex items-center justify-between gap-3 px-4 py-3 rounded-2xl border transition-all text-left shadow-sm ${
|
||||
isOpen
|
||||
? 'border-brand-primary bg-surface-card ring-2 ring-brand-primary/20'
|
||||
: 'border-line-primary/20 bg-surface-card hover:border-brand-primary/50 text-text-main'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2.5 min-w-0 flex-1">
|
||||
<span className="text-xs uppercase font-bold tracking-wider text-muted-text shrink-0">
|
||||
{optionName}:
|
||||
</span>
|
||||
<span className={`text-xs md:text-sm font-bold truncate ${selectedDisplayVal ? 'text-text-main' : 'text-muted-text/60 italic'}`}>
|
||||
{selectedDisplayVal || placeholderText}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{selectedValue && (
|
||||
isCurrentAvailable ? (
|
||||
<span className="hidden sm:inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-brand-success/10 text-brand-success border border-brand-success/20">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-brand-success" />
|
||||
พร้อมส่ง
|
||||
</span>
|
||||
) : (
|
||||
<span className="hidden sm:inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-rose-500/10 text-rose-400 border border-rose-500/20">
|
||||
หมด
|
||||
</span>
|
||||
)
|
||||
)}
|
||||
<span className="text-[11px] font-bold px-2 py-0.5 rounded-md bg-surface-page border border-line-primary/10 text-muted-text">
|
||||
{values.length} รุ่น
|
||||
</span>
|
||||
<ChevronDown className={`w-4 h-4 text-muted-text transition-transform duration-200 ${isOpen ? 'rotate-180 text-brand-primary' : ''}`} />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Floating Dropdown Menu */}
|
||||
{isOpen && (
|
||||
<div className="absolute z-40 left-0 right-0 mt-1.5 bg-surface-card border border-line-primary/30 rounded-2xl shadow-2xl p-3 space-y-2.5 backdrop-blur-xl animate-in fade-in zoom-in-95 duration-150">
|
||||
{/* Search Box */}
|
||||
<div className="relative">
|
||||
<Search className="w-4 h-4 text-muted-text absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder={placeholderText}
|
||||
className="w-full pl-9 pr-8 py-2 bg-surface-page border border-line-primary/20 rounded-xl text-xs text-text-main placeholder:text-muted-text/50 focus:outline-none focus:border-brand-primary focus:ring-1 focus:ring-brand-primary transition"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSearchQuery('')}
|
||||
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-text hover:text-text-main p-1 rounded-md"
|
||||
>
|
||||
<X className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Counter info */}
|
||||
<div className="flex items-center justify-between text-[11px] text-muted-text px-1">
|
||||
<span>
|
||||
{searchQuery ? `พบ ${filteredValues.length} จาก ${values.length} รายการ` : `ตัวเลือกทั้งหมด ${values.length} รายการ`}
|
||||
</span>
|
||||
<span className="text-[10px] text-muted-text/60">คลิกเพื่อเลือก</span>
|
||||
</div>
|
||||
|
||||
{/* Options Scroll List */}
|
||||
<div className="max-h-64 overflow-y-auto space-y-1 pr-1 custom-scrollbar">
|
||||
{filteredValues.length > 0 ? (
|
||||
filteredValues.map(({ baseVal, displayVal, available }) => {
|
||||
const isSelected = selectedValue === baseVal;
|
||||
return (
|
||||
<button
|
||||
key={baseVal}
|
||||
type="button"
|
||||
disabled={!available}
|
||||
onClick={() => {
|
||||
onSelect(baseVal)
|
||||
setIsOpen(false)
|
||||
setSearchQuery('')
|
||||
}}
|
||||
className={`w-full flex items-center justify-between px-3.5 py-2.5 rounded-xl text-left text-xs transition-all ${
|
||||
isSelected
|
||||
? 'border border-brand-primary/30 bg-brand-primary/15 font-bold text-brand-primary shadow-xs'
|
||||
: available
|
||||
? 'font-medium text-text-main hover:bg-surface-page hover:text-brand-primary'
|
||||
: 'cursor-not-allowed bg-surface-page/30 opacity-35 text-muted-text'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 min-w-0 pr-2">
|
||||
<span className={`w-2 h-2 rounded-full shrink-0 ${isSelected ? 'bg-brand-primary ring-2 ring-brand-primary/30' : available ? 'bg-line-primary/40' : 'bg-transparent'}`} />
|
||||
<span className="truncate">{displayVal}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{!available && (
|
||||
<span className="text-[10px] font-semibold text-rose-400 bg-rose-500/10 px-2 py-0.5 rounded">
|
||||
หมด
|
||||
</span>
|
||||
)}
|
||||
{isSelected && (
|
||||
<Check className="w-4 h-4 text-brand-primary shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div className="py-8 text-center text-xs text-muted-text space-y-1">
|
||||
<p className="font-semibold">{emptyText}</p>
|
||||
<p className="text-[11px] text-muted-text/60">ลองพิมพ์คำค้นหาอื่น เช่น ชื่อรุ่นรถ ยี่ห้อ หรือขนาด</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function OptionModalSelect({
|
||||
optionName,
|
||||
values,
|
||||
selectedValue,
|
||||
onSelect,
|
||||
isOptionAvailable,
|
||||
lang,
|
||||
optionsMeta,
|
||||
}: {
|
||||
optionName: string
|
||||
values: any[]
|
||||
selectedValue: string
|
||||
onSelect: (val: string) => void
|
||||
isOptionAvailable: (val: string) => boolean
|
||||
lang: string
|
||||
optionsMeta: any[] | null | undefined
|
||||
}) {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const inputRef = useRef<HTMLInputElement | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
function handleKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape' && isOpen) {
|
||||
setIsOpen(false)
|
||||
}
|
||||
}
|
||||
if (isOpen) {
|
||||
document.body.style.overflow = 'hidden'
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
setTimeout(() => inputRef.current?.focus(), 80)
|
||||
} else {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
return () => {
|
||||
document.body.style.overflow = ''
|
||||
window.removeEventListener('keydown', handleKeyDown)
|
||||
}
|
||||
}, [isOpen])
|
||||
|
||||
const selectedDisplayVal = useMemo(() => {
|
||||
if (!selectedValue) return ''
|
||||
return resolveOptionValue(selectedValue, optionsMeta, lang)
|
||||
}, [selectedValue, optionsMeta, lang])
|
||||
|
||||
const isCurrentAvailable = useMemo(() => {
|
||||
if (!selectedValue) return false
|
||||
return isOptionAvailable(selectedValue)
|
||||
}, [selectedValue, isOptionAvailable])
|
||||
|
||||
const filteredValues = useMemo(() => {
|
||||
const q = searchQuery.trim().toLowerCase()
|
||||
return values
|
||||
.map(val => {
|
||||
const baseVal = getBaseString(val)
|
||||
const displayVal = resolveLocalized(val, lang)
|
||||
const available = isOptionAvailable(baseVal)
|
||||
return { baseVal, displayVal, available }
|
||||
})
|
||||
.filter(item => {
|
||||
if (!q) return true
|
||||
return (
|
||||
item.displayVal.toLowerCase().includes(q) ||
|
||||
item.baseVal.toLowerCase().includes(q)
|
||||
)
|
||||
})
|
||||
}, [values, searchQuery, lang, isOptionAvailable])
|
||||
|
||||
const placeholderText = useMemo(() => {
|
||||
switch (lang.slice(0, 2)) {
|
||||
case 'th': return `ค้นหาตัวเลือก หรือชื่อรุ่น (${values.length} รายการ)...`
|
||||
case 'ja': return `オプションまたはモデルを検索 (${values.length}件)...`
|
||||
case 'zh': return `搜索规格或型号 (${values.length} 项)...`
|
||||
default: return `Search options or model (${values.length} items)...`
|
||||
}
|
||||
}, [lang, values.length])
|
||||
|
||||
return (
|
||||
<div className="w-full space-y-2">
|
||||
{/* Trigger Button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen(true)}
|
||||
className="w-full flex items-center justify-between gap-3 px-4 py-3.5 rounded-2xl border border-line-primary/20 bg-surface-card hover:border-brand-primary/50 text-text-main shadow-xs transition-all group"
|
||||
>
|
||||
<div className="flex items-center gap-2.5 min-w-0 flex-1">
|
||||
<span className="text-xs uppercase font-bold tracking-wider text-muted-text shrink-0">
|
||||
{optionName}:
|
||||
</span>
|
||||
<span className={`text-xs md:text-sm font-bold truncate ${selectedDisplayVal ? 'text-text-main' : 'text-muted-text/60 italic'}`}>
|
||||
{selectedDisplayVal || 'คลิกเพื่อเลือก'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{selectedValue && (
|
||||
isCurrentAvailable ? (
|
||||
<span className="hidden sm:inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-brand-success/10 text-brand-success border border-brand-success/20">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-brand-success" />
|
||||
พร้อมส่ง
|
||||
</span>
|
||||
) : (
|
||||
<span className="hidden sm:inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-rose-500/10 text-rose-400 border border-rose-500/20">
|
||||
หมด
|
||||
</span>
|
||||
)
|
||||
)}
|
||||
<span className="text-[11px] font-bold px-2 py-0.5 rounded-md bg-surface-page border border-line-primary/10 text-muted-text">
|
||||
{values.length} รุ่น
|
||||
</span>
|
||||
<span className="text-xs font-semibold text-brand-primary group-hover:translate-x-0.5 transition-transform flex items-center gap-1">
|
||||
เลือก <ChevronDown className="w-4 h-4 -rotate-90" />
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Modal Dialog (Desktop) / Bottom Sheet (Mobile) */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/70 backdrop-blur-md animate-in fade-in duration-200"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
<div
|
||||
className="w-full sm:max-w-2xl bg-surface-card border border-line-primary/30 rounded-t-3xl sm:rounded-3xl shadow-2xl p-4 sm:p-6 space-y-4 max-h-[85vh] flex flex-col animate-in slide-in-from-bottom sm:zoom-in-95 duration-200"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
{/* Mobile Sheet Handle */}
|
||||
<div className="w-12 h-1.5 bg-line-primary/30 rounded-full mx-auto sm:hidden" />
|
||||
|
||||
{/* Modal Header */}
|
||||
<div className="flex items-center justify-between gap-3 pb-3 border-b border-line-primary/15">
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-text-main">
|
||||
{optionName}
|
||||
</h3>
|
||||
<p className="text-xs text-muted-text">
|
||||
ตัวเลือกทั้งหมด {values.length} รายการ (คลิกที่ตัวเลือกเพื่อเลือกทันที)
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="p-2 rounded-xl text-muted-text hover:text-text-main hover:bg-surface-page transition-all"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search Input */}
|
||||
<div className="relative shrink-0">
|
||||
<Search className="w-4 h-4 text-muted-text absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder={placeholderText}
|
||||
className="w-full pl-10 pr-9 py-2.5 bg-surface-page border border-line-primary/20 rounded-xl text-xs md:text-sm text-text-main placeholder:text-muted-text/50 focus:outline-none focus:border-brand-primary focus:ring-1 focus:ring-brand-primary transition"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSearchQuery('')}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-text hover:text-text-main p-1 rounded-md"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Counter info */}
|
||||
<div className="flex items-center justify-between text-xs text-muted-text px-1 shrink-0">
|
||||
<span>
|
||||
{searchQuery ? `พบ ${filteredValues.length} จาก ${values.length} รายการ` : `รายการทั้งหมด ${values.length} ตัวเลือก`}
|
||||
</span>
|
||||
<span className="text-[11px] text-muted-text/70">กด ESC เพื่อปิด</span>
|
||||
</div>
|
||||
|
||||
{/* Grid of Options (2 cols on desktop, 1 col on mobile) */}
|
||||
<div className="overflow-y-auto space-y-1.5 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-2 pr-1 custom-scrollbar flex-1 min-h-0">
|
||||
{filteredValues.length > 0 ? (
|
||||
filteredValues.map(({ baseVal, displayVal, available }) => {
|
||||
const isSelected = selectedValue === baseVal;
|
||||
return (
|
||||
<button
|
||||
key={baseVal}
|
||||
type="button"
|
||||
disabled={!available}
|
||||
onClick={() => {
|
||||
onSelect(baseVal)
|
||||
setIsOpen(false)
|
||||
setSearchQuery('')
|
||||
}}
|
||||
className={`w-full flex items-center justify-between p-3 rounded-xl text-left text-xs transition-all ${
|
||||
isSelected
|
||||
? 'border border-brand-primary/40 bg-brand-primary/15 font-bold text-brand-primary shadow-xs'
|
||||
: available
|
||||
? 'border border-line-primary/10 bg-surface-page/50 font-medium text-text-main hover:bg-surface-page hover:border-brand-primary/40 hover:text-brand-primary'
|
||||
: 'cursor-not-allowed bg-surface-page/20 opacity-35 text-muted-text border border-line-primary/5'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2.5 min-w-0 pr-2">
|
||||
<span className={`w-2 h-2 rounded-full shrink-0 ${isSelected ? 'bg-brand-primary ring-2 ring-brand-primary/30' : available ? 'bg-line-primary/40' : 'bg-transparent'}`} />
|
||||
<span className="truncate">{displayVal}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{!available && (
|
||||
<span className="text-[10px] font-semibold text-rose-400 bg-rose-500/10 px-2 py-0.5 rounded">
|
||||
หมด
|
||||
</span>
|
||||
)}
|
||||
{isSelected && (
|
||||
<Check className="w-4 h-4 text-brand-primary shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div className="sm:col-span-2 py-12 text-center text-xs text-muted-text space-y-1">
|
||||
<p className="font-semibold text-text-main">ไม่พบตัวเลือกที่ตรงกับคำค้นหา</p>
|
||||
<p className="text-[11px] text-muted-text/60">ลองพิมพ์คำค้นหาอื่น เช่น ชื่อรุ่นรถ ยี่ห้อ หรือขนาด</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default function AddToCartSection({
|
||||
product,
|
||||
showBrandMeta = true,
|
||||
@@ -424,79 +883,108 @@ export default function AddToCartSection({
|
||||
return Boolean(sw.imageUrl || sw.colorCode);
|
||||
});
|
||||
|
||||
const displayType = ((option as any).displayType || 'auto') as string;
|
||||
const isLargeList = option.values.length > 8 && !hasAnySwatch;
|
||||
const shouldRenderModal = displayType === 'modal';
|
||||
const shouldRenderDropdown = displayType === 'dropdown' || (displayType === 'auto' && isLargeList);
|
||||
|
||||
return (
|
||||
<div key={optNameBase} className="space-y-3">
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-muted-text">
|
||||
{t.selectPrefix(optNameDisplay)}
|
||||
</p>
|
||||
{shouldRenderModal ? (
|
||||
<OptionModalSelect
|
||||
optionName={t.selectPrefix(optNameDisplay)}
|
||||
values={option.values}
|
||||
selectedValue={selectedOptions[optIndex] || ''}
|
||||
onSelect={(val) => handleOptionChange(optIndex, val)}
|
||||
isOptionAvailable={(val) => isOptionAvailable(optIndex, val)}
|
||||
lang={lang}
|
||||
optionsMeta={product.options}
|
||||
/>
|
||||
) : shouldRenderDropdown ? (
|
||||
<SearchableOptionSelect
|
||||
optionName={t.selectPrefix(optNameDisplay)}
|
||||
values={option.values}
|
||||
selectedValue={selectedOptions[optIndex] || ''}
|
||||
onSelect={(val) => handleOptionChange(optIndex, val)}
|
||||
isOptionAvailable={(val) => isOptionAvailable(optIndex, val)}
|
||||
lang={lang}
|
||||
optionsMeta={product.options}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-muted-text">
|
||||
{t.selectPrefix(optNameDisplay)}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{option.values.map(val => {
|
||||
const baseVal = getBaseString(val);
|
||||
const displayVal = resolveLocalized(val, lang);
|
||||
const isSelected = selectedOptions[optIndex] === baseVal;
|
||||
const isAvailable = isOptionAvailable(optIndex, baseVal);
|
||||
const swatch = getOptionSwatch(optIndex, baseVal);
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{option.values.map(val => {
|
||||
const baseVal = getBaseString(val);
|
||||
const displayVal = resolveLocalized(val, lang);
|
||||
const isSelected = selectedOptions[optIndex] === baseVal;
|
||||
const isAvailable = isOptionAvailable(optIndex, baseVal);
|
||||
const swatch = getOptionSwatch(optIndex, baseVal);
|
||||
|
||||
if (hasAnySwatch) {
|
||||
return (
|
||||
<button
|
||||
key={baseVal}
|
||||
disabled={!isAvailable}
|
||||
onClick={() => handleOptionChange(optIndex, baseVal)}
|
||||
className={`group relative flex flex-col items-center gap-1.5 p-1.5 rounded-xl border transition-all ${
|
||||
isSelected
|
||||
? 'border-brand-primary bg-brand-primary/10 ring-2 ring-brand-primary/30'
|
||||
: isAvailable
|
||||
? 'border-line-primary/20 bg-surface-card hover:border-brand-primary/50 text-muted-text'
|
||||
: 'border-line-primary/10 bg-surface-card/40 opacity-40 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
<div className="relative w-14 h-14 md:w-16 md:h-16 rounded-lg overflow-hidden bg-surface-page border border-line-primary/10 flex items-center justify-center">
|
||||
{swatch.imageUrl ? (
|
||||
<Image
|
||||
src={swatch.imageUrl}
|
||||
alt={displayVal}
|
||||
fill
|
||||
sizes="64px"
|
||||
className="object-cover transition-transform group-hover:scale-105"
|
||||
/>
|
||||
) : swatch.colorCode ? (
|
||||
<div
|
||||
className="w-full h-full rounded-md shadow-inner transition-transform group-hover:scale-105"
|
||||
style={{ backgroundColor: swatch.colorCode }}
|
||||
/>
|
||||
) : (
|
||||
<span className="text-xs font-semibold text-text-main">{displayVal}</span>
|
||||
)}
|
||||
</div>
|
||||
<span className={`text-[11px] font-medium tracking-wide ${
|
||||
isSelected ? 'text-brand-primary font-bold' : 'text-muted-text group-hover:text-text-main'
|
||||
}`}>
|
||||
if (hasAnySwatch) {
|
||||
return (
|
||||
<button
|
||||
key={baseVal}
|
||||
disabled={!isAvailable}
|
||||
onClick={() => handleOptionChange(optIndex, baseVal)}
|
||||
className={`group relative flex flex-col items-center gap-1.5 p-1.5 rounded-xl border transition-all ${
|
||||
isSelected
|
||||
? 'border-brand-primary bg-brand-primary/10 ring-2 ring-brand-primary/30'
|
||||
: isAvailable
|
||||
? 'border-line-primary/20 bg-surface-card hover:border-brand-primary/50 text-muted-text'
|
||||
: 'border-line-primary/10 bg-surface-card/40 opacity-40 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
<div className="relative w-14 h-14 md:w-16 md:h-16 rounded-lg overflow-hidden bg-surface-page border border-line-primary/10 flex items-center justify-center">
|
||||
{swatch.imageUrl ? (
|
||||
<Image
|
||||
src={swatch.imageUrl}
|
||||
alt={displayVal}
|
||||
fill
|
||||
sizes="64px"
|
||||
className="object-cover transition-transform group-hover:scale-105"
|
||||
/>
|
||||
) : swatch.colorCode ? (
|
||||
<div
|
||||
className="w-full h-full rounded-md shadow-inner transition-transform group-hover:scale-105"
|
||||
style={{ backgroundColor: swatch.colorCode }}
|
||||
/>
|
||||
) : (
|
||||
<span className="text-xs font-semibold text-text-main">{displayVal}</span>
|
||||
)}
|
||||
</div>
|
||||
<span className={`text-[11px] font-medium tracking-wide ${
|
||||
isSelected ? 'text-brand-primary font-bold' : 'text-muted-text group-hover:text-text-main'
|
||||
}`}>
|
||||
{displayVal}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
key={baseVal}
|
||||
disabled={!isAvailable}
|
||||
onClick={() => handleOptionChange(optIndex, baseVal)}
|
||||
className={`rounded-xl border px-5 py-2.5 text-xs font-bold uppercase tracking-wider transition ${
|
||||
isSelected
|
||||
? 'border-brand-primary bg-brand-primary/15 text-brand-primary ring-1 ring-brand-primary/30 shadow-card'
|
||||
: isAvailable
|
||||
? 'border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary/50 hover:text-text-main'
|
||||
: 'border-line-primary/10 bg-surface-card/40 text-muted-text/30 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
{displayVal}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
key={baseVal}
|
||||
disabled={!isAvailable}
|
||||
onClick={() => handleOptionChange(optIndex, baseVal)}
|
||||
className={`rounded-xl border px-5 py-2.5 text-xs font-bold uppercase tracking-wider transition ${
|
||||
isSelected
|
||||
? 'border-brand-primary bg-brand-primary/15 text-brand-primary ring-1 ring-brand-primary/30 shadow-card'
|
||||
: isAvailable
|
||||
? 'border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary/50 hover:text-text-main'
|
||||
: 'border-line-primary/10 bg-surface-card/40 text-muted-text/30 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
{displayVal}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -24,7 +24,7 @@ function ResponsiveProductImage({ image, alt, className, fetchPriority, sizes }:
|
||||
src: image.url,
|
||||
alt,
|
||||
width: 1200,
|
||||
height: 1600,
|
||||
height: 1200,
|
||||
sizes,
|
||||
fetchPriority,
|
||||
}).props
|
||||
@@ -82,9 +82,7 @@ export default function ProductGallery({ productName, categoryName, images, stre
|
||||
const frameClass = stretchDesktop
|
||||
? 'relative aspect-square w-full overflow-hidden rounded-3xl bg-surface-card shadow-card md:aspect-auto md:h-full md:min-h-0'
|
||||
: 'relative aspect-square w-full overflow-hidden rounded-3xl bg-surface-card shadow-card'
|
||||
const mainImageClass = stretchDesktop
|
||||
? 'h-full w-full object-cover md:object-contain'
|
||||
: 'h-full w-full object-cover'
|
||||
const mainImageClass = 'h-full w-full object-contain p-4 md:p-6'
|
||||
|
||||
if (imageCount === 1) {
|
||||
return (
|
||||
@@ -101,7 +99,7 @@ export default function ProductGallery({ productName, categoryName, images, stre
|
||||
|
||||
return (
|
||||
<div className={`flex w-full flex-col-reverse gap-4 md:flex-row ${stretchDesktop ? 'md:h-full md:min-h-0 md:items-stretch' : 'items-start'}`}>
|
||||
<div className={`hide-scrollbar flex w-full flex-none snap-x snap-mandatory flex-row gap-2 overflow-x-auto pb-2 md:w-20 md:snap-y md:flex-col md:gap-3 md:overflow-y-auto md:pb-0 md:pr-2 lg:w-24 ${stretchDesktop ? 'md:h-full md:min-h-0' : ''}`}>
|
||||
<div className={`hide-scrollbar flex w-full flex-none snap-x snap-mandatory flex-row gap-2 overflow-x-auto pb-2 md:w-20 md:snap-y md:flex-col md:gap-3 md:overflow-y-auto md:pb-0 md:pr-2 lg:w-24 ${stretchDesktop ? 'md:h-full md:min-h-0' : 'md:max-h-[500px]'}`}>
|
||||
{sortedImages.map((image, idx) => (
|
||||
<button
|
||||
key={image.id || `${image.url}-${idx}`}
|
||||
|
||||
Reference in new issue
Block a user