admin/homaroma
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

x

Browse Source
This commit is contained in:
Your Name committed 2026-10-04 06:24:37 +07:00
1 parent 46f09ab145
commit 04987eebac
1 file changed
+34 -34
Download Patch File Download Diff File Expand all files Collapse all files
apps/website/src/components/AddToCartSection.tsx
+34 -34
View File
@@ -347,10 +347,10 @@ export default function AddToCartSection({
) : ( ) : (
<div className="space-y-1"> <div className="space-y-1">
{categoryName && ( {categoryName && (
<p className="text-[11px] font-bold uppercase tracking-widest text-red-500">{categoryName}</p> <p className="text-[11px] font-bold uppercase tracking-widest text-brand-primary">{categoryName}</p>
)} )}
<div className="text-xl md:text-2xl font-black italic tracking-wider uppercase text-text-main flex items-center gap-2"> <div className="text-xl md:text-2xl font-black italic tracking-wider uppercase text-text-main flex items-center gap-2">
<span className="text-red-500 font-extrabold">{product.brand?.name || 'NORIFUMI'}</span> <span className="text-brand-primary font-extrabold">{product.brand?.name || 'NORIFUMI'}</span>
<span>{categoryName} Series</span> <span>{categoryName} Series</span>
</div> </div>
</div> </div>
@@ -362,24 +362,24 @@ export default function AddToCartSection({
</h1> </h1>
{/* Subtitle / Tagline */} {/* Subtitle / Tagline */}
<p className="text-xs md:text-sm text-zinc-400 font-normal"> <p className="text-xs md:text-sm text-muted-text font-normal">
{description ? (description.length > 80 ? `${description.slice(0, 80)}...` : description) : t.defaultTagline} {description ? (description.length > 80 ? `${description.slice(0, 80)}...` : description) : t.defaultTagline}
</p> </p>
{/* Star Rating & SKU Row */} {/* Star Rating & SKU Row */}
<div className="flex flex-wrap items-center gap-3 pt-1 text-xs text-zinc-400"> <div className="flex flex-wrap items-center gap-3 pt-1 text-xs text-muted-text">
<div className="flex items-center gap-1.5 text-amber-400"> <div className="flex items-center gap-1.5 text-amber-500">
<div className="flex items-center"> <div className="flex items-center">
{[...Array(5)].map((_, i) => ( {[...Array(5)].map((_, i) => (
<Star key={i} className="w-3.5 h-3.5 fill-amber-400 text-amber-400" /> <Star key={i} className="w-3.5 h-3.5 fill-amber-400 text-amber-400" />
))} ))}
</div> </div>
<span className="font-bold text-text-main ml-0.5">4.9</span> <span className="font-bold text-text-main ml-0.5">4.9</span>
<span className="text-zinc-500">({`128 ${t.reviews}`})</span> <span className="text-muted-text/80">({`128 ${t.reviews}`})</span>
</div> </div>
<span className="text-zinc-700">|</span> <span className="text-muted-text/30">|</span>
<div className="font-mono text-[11px] text-zinc-400"> <div className="font-mono text-[11px] text-muted-text">
SKU: <span className="text-zinc-200 font-semibold">{currentVariant?.sku || 'NOR-GP-OILCUP-SET'}</span> SKU: <span className="text-text-main font-semibold">{currentVariant?.sku || 'NOR-GP-OILCUP-SET'}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -387,23 +387,23 @@ export default function AddToCartSection({
{/* Price & In-stock Badge */} {/* Price & In-stock Badge */}
<div className="flex items-center justify-between gap-4 py-2 border-y border-line-primary/10"> <div className="flex items-center justify-between gap-4 py-2 border-y border-line-primary/10">
<div className="flex items-baseline gap-2"> <div className="flex items-baseline gap-2">
<span className="text-3xl md:text-4xl font-black text-red-500 tracking-tight"> <span className="text-3xl md:text-4xl font-black text-text-main tracking-tight">
{formatPrice(currentVariant?.price ?? product.price ?? 0)} {formatPrice(currentVariant?.price ?? product.price ?? 0)}
</span> </span>
{currentVariantName && ( {currentVariantName && (
<span className="text-xs text-zinc-400 font-medium">/ {currentVariantName}</span> <span className="text-xs text-muted-text font-medium">/ {currentVariantName}</span>
)} )}
</div> </div>
<div className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-semibold"> <div className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-brand-success/10 border border-brand-success/20 text-brand-success text-xs font-semibold">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" /> <span className="w-1.5 h-1.5 rounded-full bg-brand-success animate-pulse" />
<span>{t.inStock}</span> <span>{t.inStock}</span>
</div> </div>
</div> </div>
{/* Description Excerpt */} {/* Description Excerpt */}
{description && ( {description && (
<p className="text-xs md:text-sm leading-relaxed text-zinc-400"> <p className="text-xs md:text-sm leading-relaxed text-muted-text">
{description} {description}
</p> </p>
)} )}
@@ -418,7 +418,7 @@ export default function AddToCartSection({
return ( return (
<div key={optNameBase} className="space-y-3"> <div key={optNameBase} className="space-y-3">
<p className="text-xs font-bold uppercase tracking-widest text-zinc-300"> <p className="text-xs font-bold uppercase tracking-widest text-muted-text">
{t.selectPrefix(optNameDisplay)} {t.selectPrefix(optNameDisplay)}
</p> </p>
@@ -438,13 +438,13 @@ export default function AddToCartSection({
onClick={() => handleOptionChange(optIndex, baseVal)} onClick={() => handleOptionChange(optIndex, baseVal)}
className={`group relative flex flex-col items-center gap-1.5 p-1.5 rounded-xl border transition-all ${ className={`group relative flex flex-col items-center gap-1.5 p-1.5 rounded-xl border transition-all ${
isSelected isSelected
? 'border-red-500 bg-red-500/10 ring-2 ring-red-500/30' ? 'border-brand-primary bg-brand-primary/10 ring-2 ring-brand-primary/30'
: isAvailable : isAvailable
? 'border-line-primary/20 bg-surface-card hover:border-line-primary/50 text-muted-text' ? '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' : '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-black/50 border border-white/5 flex items-center justify-center"> <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">
{swatchImg ? ( {swatchImg ? (
<Image <Image
src={swatchImg} src={swatchImg}
@@ -458,7 +458,7 @@ export default function AddToCartSection({
)} )}
</div> </div>
<span className={`text-[11px] font-medium tracking-wide ${ <span className={`text-[11px] font-medium tracking-wide ${
isSelected ? 'text-red-400 font-bold' : 'text-zinc-400 group-hover:text-zinc-200' isSelected ? 'text-brand-primary font-bold' : 'text-muted-text group-hover:text-text-main'
}`}> }`}>
{displayVal} {displayVal}
</span> </span>
@@ -473,9 +473,9 @@ export default function AddToCartSection({
onClick={() => handleOptionChange(optIndex, baseVal)} onClick={() => handleOptionChange(optIndex, baseVal)}
className={`rounded-xl border px-5 py-2.5 text-xs font-bold uppercase tracking-wider transition ${ className={`rounded-xl border px-5 py-2.5 text-xs font-bold uppercase tracking-wider transition ${
isSelected isSelected
? 'border-red-500 bg-red-500/15 text-red-400 ring-1 ring-red-500/30 shadow-card' ? 'border-brand-primary bg-brand-primary/15 text-brand-primary ring-1 ring-brand-primary/30 shadow-card'
: isAvailable : isAvailable
? 'border-line-primary/20 bg-surface-card text-muted-text hover:border-line-primary/50 hover:text-text-main' ? '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' : 'border-line-primary/10 bg-surface-card/40 text-muted-text/30 cursor-not-allowed'
}`} }`}
> >
@@ -499,7 +499,7 @@ export default function AddToCartSection({
type="button" type="button"
onClick={() => setQuantity(q => Math.max(1, q - 1))} onClick={() => setQuantity(q => Math.max(1, q - 1))}
disabled={quantity <= 1} disabled={quantity <= 1}
className="w-9 h-9 rounded-lg flex items-center justify-center text-zinc-400 hover:text-white hover:bg-white/5 disabled:opacity-30 disabled:hover:bg-transparent transition-colors" className="w-9 h-9 rounded-lg flex items-center justify-center text-muted-text hover:text-text-main hover:bg-brand-primary/10 disabled:opacity-30 disabled:hover:bg-transparent transition-colors"
aria-label="Decrease quantity" aria-label="Decrease quantity"
> >
<Minus className="w-4 h-4" /> <Minus className="w-4 h-4" />
@@ -510,7 +510,7 @@ export default function AddToCartSection({
<button <button
type="button" type="button"
onClick={() => setQuantity(q => q + 1)} onClick={() => setQuantity(q => q + 1)}
className="w-9 h-9 rounded-lg flex items-center justify-center text-zinc-400 hover:text-white hover:bg-white/5 transition-colors" className="w-9 h-9 rounded-lg flex items-center justify-center text-muted-text hover:text-text-main hover:bg-brand-primary/10 transition-colors"
aria-label="Increase quantity" aria-label="Increase quantity"
> >
<Plus className="w-4 h-4" /> <Plus className="w-4 h-4" />
@@ -521,10 +521,10 @@ export default function AddToCartSection({
<button <button
onClick={handleAddToCart} onClick={handleAddToCart}
disabled={!currentVariant} disabled={!currentVariant}
className={`flex-1 h-11 md:h-12 px-6 rounded-xl font-bold text-sm tracking-wide flex items-center justify-center gap-2 transition-all shadow-lg ${ className={`flex-1 h-11 md:h-12 px-6 rounded-xl font-bold text-sm tracking-wide flex items-center justify-center gap-2 transition-all shadow-md ${
currentVariant currentVariant
? 'bg-red-600 hover:bg-red-500 text-white shadow-red-600/30 hover:shadow-red-600/50 active:scale-[0.99]' ? 'bg-brand-primary hover:bg-brand-primary-hover text-surface-card shadow-brand-primary/20 hover:shadow-brand-primary/30 active:scale-[0.99]'
: 'bg-zinc-800 text-zinc-500 cursor-not-allowed shadow-none' : 'bg-surface-muted text-muted-text/50 cursor-not-allowed shadow-none'
}`} }`}
> >
<ShoppingCart className="w-4 h-4" /> <ShoppingCart className="w-4 h-4" />
@@ -534,7 +534,7 @@ export default function AddToCartSection({
{/* Wishlist Button */} {/* Wishlist Button */}
<button <button
type="button" type="button"
className="w-11 h-11 md:w-12 md:h-12 rounded-xl border border-line-primary/20 bg-surface-card flex items-center justify-center text-zinc-400 hover:text-red-500 hover:border-red-500/40 transition-colors shrink-0" className="w-11 h-11 md:w-12 md:h-12 rounded-xl border border-line-primary/20 bg-surface-card flex items-center justify-center text-muted-text hover:text-brand-warm hover:border-brand-warm/40 transition-colors shrink-0"
title={t.wishlist} title={t.wishlist}
> >
<Heart className="w-4 h-4" /> <Heart className="w-4 h-4" />
@@ -543,7 +543,7 @@ export default function AddToCartSection({
{/* Compare Button */} {/* Compare Button */}
<button <button
type="button" type="button"
className="w-11 h-11 md:w-12 md:h-12 rounded-xl border border-line-primary/20 bg-surface-card flex items-center justify-center text-zinc-400 hover:text-cyan-400 hover:border-cyan-400/40 transition-colors shrink-0" className="w-11 h-11 md:w-12 md:h-12 rounded-xl border border-line-primary/20 bg-surface-card flex items-center justify-center text-muted-text hover:text-brand-primary hover:border-brand-primary/40 transition-colors shrink-0"
title={t.compare} title={t.compare}
> >
<BarChart2 className="w-4 h-4" /> <BarChart2 className="w-4 h-4" />
@@ -557,11 +557,11 @@ export default function AddToCartSection({
{t.badges.map((badge, idx) => { {t.badges.map((badge, idx) => {
const Icon = idx === 0 ? Truck : idx === 1 ? ShieldCheck : idx === 2 ? RotateCcw : MessageCircle; const Icon = idx === 0 ? Truck : idx === 1 ? ShieldCheck : idx === 2 ? RotateCcw : MessageCircle;
return ( return (
<div key={badge.title} className="flex items-center gap-2.5 p-2 rounded-xl bg-surface-card/40 border border-line-primary/10"> <div key={badge.title} className="flex items-center gap-2.5 p-2 rounded-xl bg-surface-card/60 border border-line-primary/10">
<Icon className="w-4 h-4 text-zinc-300 shrink-0" /> <Icon className="w-4 h-4 text-muted-text shrink-0" />
<div className="leading-tight"> <div className="leading-tight">
<span className="font-bold text-text-main block">{badge.title}</span> <span className="font-bold text-text-main block">{badge.title}</span>
<span className="text-[10px] text-zinc-500">{badge.desc}</span> <span className="text-[10px] text-muted-text">{badge.desc}</span>
</div> </div>
</div> </div>
); );
@@ -572,18 +572,18 @@ export default function AddToCartSection({
</div> </div>
{showMobileStickyBar && ( {showMobileStickyBar && (
<div className="fixed bottom-0 left-0 right-0 z-40 border-t border-line-primary/20 bg-surface-card/95 p-4 shadow-[0_-10px_30px_rgba(0,0,0,0.2)] backdrop-blur md:hidden"> <div className="fixed bottom-0 left-0 right-0 z-40 border-t border-line-primary/20 bg-surface-card/95 p-4 shadow-[0_-10px_30px_rgba(0,0,0,0.08)] backdrop-blur md:hidden">
<div className="flex items-center justify-between gap-4"> <div className="flex items-center justify-between gap-4">
<div className="flex flex-col"> <div className="flex flex-col">
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-text/70"> <span className="text-[10px] font-bold uppercase tracking-widest text-muted-text/70">
{currentVariantName || t.totalPrice} {currentVariantName || t.totalPrice}
</span> </span>
<span className="text-xl font-black text-red-500">{formatPrice(currentVariant?.price ?? product.price ?? 0)}</span> <span className="text-xl font-black text-text-main">{formatPrice(currentVariant?.price ?? product.price ?? 0)}</span>
</div> </div>
<button <button
onClick={handleAddToCart} onClick={handleAddToCart}
disabled={!currentVariant} disabled={!currentVariant}
className={`flex-1 px-5 py-3 rounded-xl font-bold text-sm bg-red-600 hover:bg-red-500 text-white shadow-lg shadow-red-600/30 flex items-center justify-center gap-2 ${!currentVariant ? 'opacity-50 cursor-not-allowed shadow-none' : ''}`} className={`flex-1 px-5 py-3 rounded-xl font-bold text-sm bg-brand-primary hover:bg-brand-primary-hover text-surface-card shadow-md shadow-brand-primary/20 flex items-center justify-center gap-2 transition-colors ${!currentVariant ? 'opacity-50 cursor-not-allowed shadow-none bg-surface-muted text-muted-text' : ''}`}
> >
<ShoppingCart className="w-4 h-4" /> <ShoppingCart className="w-4 h-4" />
<span>{currentVariant ? t.addToCart : t.outOfStock}</span> <span>{currentVariant ? t.addToCart : t.outOfStock}</span>