fixed some bugs
This commit is contained in:
@jcarymuhammedow
@@ -1,6 +1,16 @@
|
||||
import { useState, useEffect, useRef, useCallback } from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
import {
|
||||
X,
|
||||
ZoomIn,
|
||||
ZoomOut,
|
||||
RotateCw,
|
||||
RotateCcw,
|
||||
Maximize2,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
} from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
interface ProductImageGalleryProps {
|
||||
images: string[];
|
||||
productName: string;
|
||||
@@ -13,10 +23,22 @@ export function ProductImageGallery({
|
||||
noImageText,
|
||||
}: ProductImageGalleryProps) {
|
||||
const [selectedImage, setSelectedImage] = useState(0);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [zoom, setZoom] = useState(1);
|
||||
const [rotation, setRotation] = useState(0);
|
||||
const [position, setPosition] = useState({ x: 0, y: 0 });
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
|
||||
const t = useTranslations();
|
||||
const autoplayTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
|
||||
const modalImageRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (images.length <= 1) return;
|
||||
setSelectedImage(0);
|
||||
}, [images]);
|
||||
|
||||
useEffect(() => {
|
||||
if (images.length <= 1 || isModalOpen) return;
|
||||
|
||||
const startAutoplay = () => {
|
||||
autoplayTimerRef.current = setInterval(() => {
|
||||
@@ -28,63 +50,417 @@ export function ProductImageGallery({
|
||||
return () => {
|
||||
if (autoplayTimerRef.current) clearInterval(autoplayTimerRef.current);
|
||||
};
|
||||
}, [images.length]);
|
||||
}, [images.length, isModalOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isModalOpen) {
|
||||
document.body.style.overflow = "hidden";
|
||||
if (autoplayTimerRef.current) clearInterval(autoplayTimerRef.current);
|
||||
} else {
|
||||
document.body.style.overflow = "unset";
|
||||
}
|
||||
return () => {
|
||||
document.body.style.overflow = "unset";
|
||||
};
|
||||
}, [isModalOpen]);
|
||||
|
||||
const handleImageSelect = useCallback(
|
||||
(index: number) => {
|
||||
setSelectedImage(index);
|
||||
if (autoplayTimerRef.current) clearInterval(autoplayTimerRef.current);
|
||||
if (images.length > 1) {
|
||||
if (images.length > 1 && !isModalOpen) {
|
||||
autoplayTimerRef.current = setInterval(() => {
|
||||
setSelectedImage((prev) => (prev + 1) % images.length);
|
||||
}, 3000);
|
||||
}
|
||||
},
|
||||
[images.length]
|
||||
[images.length, isModalOpen],
|
||||
);
|
||||
|
||||
const openModal = () => {
|
||||
setIsModalOpen(true);
|
||||
resetTransform();
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
setIsModalOpen(false);
|
||||
resetTransform();
|
||||
};
|
||||
|
||||
const resetTransform = () => {
|
||||
setZoom(1);
|
||||
setRotation(0);
|
||||
setPosition({ x: 0, y: 0 });
|
||||
};
|
||||
|
||||
const handleZoomIn = () => {
|
||||
setZoom((prev) => Math.min(prev + 0.25, 5));
|
||||
};
|
||||
|
||||
const handleZoomOut = () => {
|
||||
setZoom((prev) => Math.max(prev - 0.25, 0.5));
|
||||
};
|
||||
|
||||
const handleRotateClockwise = () => {
|
||||
setRotation((prev) => (prev + 90) % 360);
|
||||
};
|
||||
|
||||
const handleRotateCounterClockwise = () => {
|
||||
setRotation((prev) => (prev - 90 + 360) % 360);
|
||||
};
|
||||
|
||||
const handleMouseDown = (e: React.MouseEvent | React.TouchEvent) => {
|
||||
if (zoom > 1) {
|
||||
setIsDragging(true);
|
||||
const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
|
||||
const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
|
||||
setDragStart({
|
||||
x: clientX - position.x,
|
||||
y: clientY - position.y,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent | React.TouchEvent) => {
|
||||
if (isDragging && zoom > 1) {
|
||||
const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
|
||||
const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
|
||||
setPosition({
|
||||
x: clientX - dragStart.x,
|
||||
y: clientY - dragStart.y,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
setIsDragging(false);
|
||||
};
|
||||
|
||||
const handleWheel = (e: React.WheelEvent) => {
|
||||
e.preventDefault();
|
||||
if (e.deltaY < 0) {
|
||||
handleZoomIn();
|
||||
} else {
|
||||
handleZoomOut();
|
||||
}
|
||||
};
|
||||
|
||||
const handleModalImageChange = (direction: "prev" | "next") => {
|
||||
if (direction === "next") {
|
||||
setSelectedImage((prev) => (prev + 1) % images.length);
|
||||
} else {
|
||||
setSelectedImage((prev) => (prev - 1 + images.length) % images.length);
|
||||
}
|
||||
resetTransform();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="contents max-w-2xl">
|
||||
<div className="relative">
|
||||
<div className="relative aspect-square w-full rounded-2xl overflow-hidden bg-white">
|
||||
{images.length > 0 ? (
|
||||
<Image
|
||||
src={images[selectedImage]}
|
||||
alt={productName}
|
||||
fill
|
||||
className="object-contain"
|
||||
priority
|
||||
/>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full text-gray-400">
|
||||
{noImageText}
|
||||
<>
|
||||
<div className="w-full lg:flex-1 max-w-2xl">
|
||||
<div className="relative">
|
||||
<div
|
||||
className="relative aspect-square w-full rounded-xl md:rounded-2xl overflow-hidden bg-gradient-to-br from-gray-50 to-gray-100 cursor-pointer group shadow-sm hover:shadow-md transition-all"
|
||||
onClick={openModal}
|
||||
>
|
||||
{images.length > 0 && images[selectedImage] ? (
|
||||
<>
|
||||
<Image
|
||||
src={images[selectedImage]}
|
||||
alt={productName}
|
||||
fill
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||||
className="object-contain transition-transform group-hover:scale-105"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||
<div className="bg-white/90 backdrop-blur-sm rounded-full p-2 md:p-3 transform translate-y-4 group-hover:translate-y-0 transition-transform">
|
||||
<Maximize2 className="w-4 h-4 md:w-5 md:h-5 text-gray-800" />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full text-gray-400 text-sm md:text-base">
|
||||
{noImageText}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{images.length > 1 && (
|
||||
<div className="mt-4 flex gap-2 overflow-x-auto pb-2">
|
||||
{images.map((image, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => handleImageSelect(index)}
|
||||
className={`relative w-16 h-16 shrink-0 rounded cursor-pointer overflow-hidden border-2 transition-all ${
|
||||
selectedImage === index
|
||||
? "border-primary ring-2 ring-primary/20"
|
||||
: "border-gray-200 hover:border-gray-300"
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
src={image}
|
||||
alt={`${productName} ${index + 1}`}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{images.length > 1 && (
|
||||
<div className="mt-4 flex gap-2 overflow-x-auto pb-2">
|
||||
{images.map((image, index) => (
|
||||
{/* Modal */}
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 z-99 bg-gradient-to-br from-gray-900/95 via-gray-800/95 to-gray-900/95 backdrop-blur-xl flex flex-col">
|
||||
{/* Top Bar */}
|
||||
<div className="absolute top-0 left-0 right-0 p-3 md:p-4 z-20 bg-gradient-to-b from-black/20 to-transparent">
|
||||
<div className="max-w-7xl mx-auto flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 md:gap-3 min-w-0 flex-1">
|
||||
<div className="w-1 h-4 md:h-6 bg-blue-500 rounded-full shrink-0" />
|
||||
<span className="text-white font-medium text-sm md:text-base truncate">
|
||||
{productName}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => handleImageSelect(index)}
|
||||
className={`relative w-16 h-16 shrink-0 rounded cursor-pointer overflow-hidden border-2 transition-all ${
|
||||
selectedImage === index
|
||||
? "border-primary ring-2 ring-primary/20"
|
||||
: "border-gray-200 hover:border-gray-300"
|
||||
}`}
|
||||
onClick={closeModal}
|
||||
className="p-2 md:p-2.5 bg-white/10 hover:bg-white/20 rounded-lg md:rounded-xl transition-all backdrop-blur-sm border border-white/10 shrink-0 ml-2"
|
||||
aria-label="Close"
|
||||
>
|
||||
<X className="w-4 h-4 md:w-5 md:h-5 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Image Area */}
|
||||
<div className="flex-1 flex items-center justify-center relative px-2 md:px-16 lg:px-20">
|
||||
{/* Left Arrow - Desktop */}
|
||||
{images.length > 1 && (
|
||||
<button
|
||||
onClick={() => handleModalImageChange("prev")}
|
||||
className="hidden md:flex absolute left-3 lg:left-6 p-2.5 md:p-3 bg-white/10 hover:bg-white/20 rounded-xl md:rounded-2xl transition-all backdrop-blur-md border border-white/10 hover:scale-110 z-10 group"
|
||||
aria-label="Previous image"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5 md:w-6 md:h-6 text-white" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Image Container */}
|
||||
<div
|
||||
ref={modalImageRef}
|
||||
className="w-full h-full flex items-center justify-center overflow-hidden"
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseUp={handleMouseUp}
|
||||
onMouseLeave={handleMouseUp}
|
||||
onTouchStart={handleMouseDown}
|
||||
onTouchMove={handleMouseMove}
|
||||
onTouchEnd={handleMouseUp}
|
||||
onWheel={handleWheel}
|
||||
style={{
|
||||
cursor:
|
||||
zoom > 1 ? (isDragging ? "grabbing" : "grab") : "default",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
transform: `translate(${position.x}px, ${position.y}px) scale(${zoom}) rotate(${rotation}deg)`,
|
||||
transition: isDragging
|
||||
? "none"
|
||||
: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
||||
}}
|
||||
className="relative w-[90vw] h-[60vh] md:w-[75vw] md:h-[70vh]"
|
||||
>
|
||||
<Image
|
||||
src={image}
|
||||
alt={`${productName} ${index + 1}`}
|
||||
src={images[selectedImage]}
|
||||
alt={productName}
|
||||
fill
|
||||
className="object-cover"
|
||||
className="object-contain pointer-events-none select-none"
|
||||
priority
|
||||
draggable={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Arrow - Desktop */}
|
||||
{images.length > 1 && (
|
||||
<button
|
||||
onClick={() => handleModalImageChange("next")}
|
||||
className="hidden md:flex absolute right-3 lg:right-6 p-2.5 md:p-3 bg-white/10 hover:bg-white/20 rounded-xl md:rounded-2xl transition-all backdrop-blur-md border border-white/10 hover:scale-110 z-10 group"
|
||||
aria-label="Next image"
|
||||
>
|
||||
<ChevronRight className="w-5 h-5 md:w-6 md:h-6 text-white" />
|
||||
</button>
|
||||
))}
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Control Bar */}
|
||||
<div className="bg-gradient-to-t from-black/40 via-black/20 to-transparent backdrop-blur-xl border-t border-white/10">
|
||||
<div className="max-w-7xl mx-auto px-3 md:px-6 py-3 md:py-4">
|
||||
{/* Mobile Layout */}
|
||||
<div className="md:hidden flex flex-col gap-2">
|
||||
{/* Row 1: Navigation */}
|
||||
{images.length > 1 && (
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<button
|
||||
onClick={() => handleModalImageChange("prev")}
|
||||
className="flex-1 p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-all border border-white/10"
|
||||
aria-label="Previous"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5 text-white mx-auto" />
|
||||
</button>
|
||||
<div className="px-4 py-2 bg-white/10 backdrop-blur-md rounded-lg border border-white/10">
|
||||
<span className="text-white text-sm font-medium whitespace-nowrap">
|
||||
{selectedImage + 1} / {images.length}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleModalImageChange("next")}
|
||||
className="flex-1 p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-all border border-white/10"
|
||||
aria-label="Next"
|
||||
>
|
||||
<ChevronRight className="w-5 h-5 text-white mx-auto" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Row 2: Zoom & Rotate */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1 bg-white/10 backdrop-blur-md rounded-lg p-1 border border-white/10 flex-1">
|
||||
<button
|
||||
onClick={handleZoomOut}
|
||||
className="p-2 hover:bg-white/20 rounded-md transition-all flex-1"
|
||||
aria-label="Zoom out"
|
||||
>
|
||||
<ZoomOut className="w-4 h-4 text-white mx-auto" />
|
||||
</button>
|
||||
<div className="px-2 py-1 bg-white/10 rounded text-center min-w-[50px]">
|
||||
<span className="text-white text-xs font-medium">
|
||||
{Math.round(zoom * 100)}%
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleZoomIn}
|
||||
className="p-2 hover:bg-white/20 rounded-md transition-all flex-1"
|
||||
aria-label="Zoom in"
|
||||
>
|
||||
<ZoomIn className="w-4 h-4 text-white mx-auto" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 bg-white/10 backdrop-blur-md rounded-lg p-1 border border-white/10">
|
||||
<button
|
||||
onClick={handleRotateCounterClockwise}
|
||||
className="p-2 hover:bg-white/20 rounded-md transition-all"
|
||||
aria-label="Rotate counter-clockwise"
|
||||
>
|
||||
<RotateCcw className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleRotateClockwise}
|
||||
className="p-2 hover:bg-white/20 rounded-md transition-all"
|
||||
aria-label="Rotate clockwise"
|
||||
>
|
||||
<RotateCw className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={resetTransform}
|
||||
className="px-3 py-2 bg-white/10 hover:bg-white/20 rounded-lg transition-all text-white text-xs font-medium border border-white/10"
|
||||
aria-label="Reset view"
|
||||
>
|
||||
{t("reset")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Layout */}
|
||||
<div className="hidden md:flex items-center justify-center gap-2">
|
||||
<button
|
||||
onClick={() => handleModalImageChange("prev")}
|
||||
disabled={images.length <= 1}
|
||||
className="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-all disabled:opacity-30 disabled:cursor-not-allowed border border-white/10"
|
||||
aria-label="Previous"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-1.5 bg-white/10 backdrop-blur-md rounded-lg p-1 border border-white/10">
|
||||
<button
|
||||
onClick={handleZoomOut}
|
||||
className="p-2 hover:bg-white/20 rounded-md transition-all"
|
||||
aria-label="Zoom out"
|
||||
>
|
||||
<ZoomOut className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
<div className="px-3 py-1 bg-white/10 rounded min-w-[60px] text-center">
|
||||
<span className="text-white text-sm font-medium">
|
||||
{Math.round(zoom * 100)}%
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleZoomIn}
|
||||
className="p-2 hover:bg-white/20 rounded-md transition-all"
|
||||
aria-label="Zoom in"
|
||||
>
|
||||
<ZoomIn className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="w-px h-8 bg-white/20" />
|
||||
|
||||
<div className="flex items-center gap-1.5 bg-white/10 backdrop-blur-md rounded-lg p-1 border border-white/10">
|
||||
<button
|
||||
onClick={handleRotateCounterClockwise}
|
||||
className="p-2 hover:bg-white/20 rounded-md transition-all"
|
||||
aria-label="Rotate counter-clockwise"
|
||||
>
|
||||
<RotateCcw className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleRotateClockwise}
|
||||
className="p-2 hover:bg-white/20 rounded-md transition-all"
|
||||
aria-label="Rotate clockwise"
|
||||
>
|
||||
<RotateCw className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={resetTransform}
|
||||
className="px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg transition-all text-white text-sm font-medium border border-white/10"
|
||||
aria-label="Reset view"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
|
||||
<div className="w-px h-8 bg-white/20" />
|
||||
|
||||
<button
|
||||
onClick={() => handleModalImageChange("next")}
|
||||
disabled={images.length <= 1}
|
||||
className="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-all disabled:opacity-30 disabled:cursor-not-allowed border border-white/10"
|
||||
aria-label="Next"
|
||||
>
|
||||
<ChevronRight className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
|
||||
{images.length > 1 && (
|
||||
<>
|
||||
<div className="w-px h-8 bg-white/20" />
|
||||
<div className="px-4 py-2 bg-white/10 backdrop-blur-md rounded-lg border border-white/10">
|
||||
<span className="text-white text-sm font-medium">
|
||||
{selectedImage + 1} / {images.length}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Star } from "lucide-react";
|
||||
import { Star, Package, Tag, Palette } from "lucide-react";
|
||||
|
||||
interface ProductProperty {
|
||||
name: string;
|
||||
@@ -33,38 +33,76 @@ export function ProductInfoCard({
|
||||
t,
|
||||
}: ProductInfoCardProps) {
|
||||
return (
|
||||
<div className="flex-1 space-y-6 bg-white">
|
||||
<Card className="p-4 rounded-xl border-gray-200">
|
||||
<h3 className="text-xl font-semibold mb-4">{name}</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex-1 space-y-6 bg-transparent">
|
||||
{/* Main Info Card */}
|
||||
<Card className="p-6 rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition-shadow duration-300 gap-0">
|
||||
<div className="">
|
||||
<h1 className="text-3xl font-bold text-gray-900 leading-tight mb-3">
|
||||
{name}
|
||||
</h1>
|
||||
|
||||
{/* Rating Section */}
|
||||
{reviewsCount > 0 && (
|
||||
<div className="flex items-center gap-3 pt-2">
|
||||
<div className="flex items-center gap-1.5">
|
||||
{Array.from({ length: 5 }).map((_, idx) => (
|
||||
<Star
|
||||
key={idx}
|
||||
className={`h-5 w-5 ${
|
||||
idx < Math.floor(averageRating)
|
||||
? "fill-amber-400 text-amber-400"
|
||||
: "fill-gray-200 text-gray-200"
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-sm font-semibold text-gray-900">
|
||||
{averageRating.toFixed(1)}
|
||||
</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
({reviewsCount} {t("reviews")})
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator className="my-6 bg-gray-100" />
|
||||
|
||||
{/* Specifications */}
|
||||
<div className="space-y-1">
|
||||
{brandName && (
|
||||
<>
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-gray-500">{t("brands")}</span>
|
||||
<span className="font-medium">{brandName}</span>
|
||||
<div className="flex justify-between items-center py-3.5 px-4 rounded-xl hover:bg-gray-50 transition-colors group">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-9 w-9 rounded-xl bg-gray-100 group-hover:bg-gray-200 flex items-center justify-center transition-colors">
|
||||
<Package className="h-4.5 w-4.5 text-gray-700" />
|
||||
</div>
|
||||
<span className="text-gray-600 font-medium">
|
||||
{t("brands")}
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900">{brandName}</span>
|
||||
</div>
|
||||
<Separator />
|
||||
<Separator className="bg-gray-100" />
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
{/* {barcode && (
|
||||
<>
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-gray-500">{t("barcode")}</span>
|
||||
<span className="font-mono text-sm">{barcode}</span>
|
||||
</div>
|
||||
<Separator />
|
||||
</>
|
||||
)} */}
|
||||
|
||||
{colour && (
|
||||
<>
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-gray-500">{t("color")}</span>
|
||||
<span className="font-medium">{colour}</span>
|
||||
<div className="flex justify-between items-center py-3.5 px-4 rounded-xl hover:bg-gray-50 transition-colors group">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-9 w-9 rounded-xl bg-gray-100 group-hover:bg-gray-200 flex items-center justify-center transition-colors">
|
||||
<Palette className="h-4.5 w-4.5 text-gray-700" />
|
||||
</div>
|
||||
<span className="text-gray-600 font-medium">
|
||||
{t("color")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-semibold text-gray-900">{colour}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<Separator className="bg-gray-100" />
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -74,26 +112,62 @@ export function ProductInfoCard({
|
||||
(prop, idx) =>
|
||||
prop.value && (
|
||||
<div key={idx}>
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-gray-500">{prop.name}</span>
|
||||
<span className="font-medium">{prop.value}</span>
|
||||
<div className="flex justify-between items-center py-3.5 px-4 rounded-xl hover:bg-gray-50 transition-colors group">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-9 w-9 rounded-xl bg-gray-100 group-hover:bg-gray-200 flex items-center justify-center transition-colors">
|
||||
<Tag className="h-4.5 w-4.5 text-gray-700" />
|
||||
</div>
|
||||
<span className="text-gray-600 font-medium">
|
||||
{prop.name}
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900 text-right max-w-[200px] truncate">
|
||||
{prop.value}
|
||||
</span>
|
||||
</div>
|
||||
{idx < properties.length - 1 && <Separator />}
|
||||
{idx < properties.length - 1 && (
|
||||
<Separator className="bg-gray-100" />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
),
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Description Card */}
|
||||
{description && (
|
||||
<Card className="p-4 rounded-xl border-gray-200 gap-2">
|
||||
<h3 className="text-xl font-semibold mb-3">
|
||||
{t("product_description")}
|
||||
</h3>
|
||||
<Card className="p-8 rounded-3xl border border-gray-200 shadow-sm hover:shadow-md transition-shadow duration-300">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="h-10 w-10 rounded-xl bg-gray-900 flex items-center justify-center">
|
||||
<svg
|
||||
className="h-5 w-5 text-white"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-gray-900">
|
||||
{t("product_description")}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="text-gray-700 leading-relaxed prose prose-sm max-w-none"
|
||||
className="text-gray-700 leading-relaxed prose prose-sm max-w-none
|
||||
prose-headings:text-gray-900 prose-headings:font-bold
|
||||
prose-p:text-gray-700 prose-p:leading-relaxed
|
||||
prose-ul:text-gray-700 prose-ol:text-gray-700
|
||||
prose-li:text-gray-700 prose-li:leading-relaxed
|
||||
prose-strong:text-gray-900 prose-strong:font-semibold
|
||||
prose-a:text-gray-900 prose-a:font-medium hover:prose-a:text-gray-700"
|
||||
dangerouslySetInnerHTML={{ __html: description }}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
@@ -39,6 +39,10 @@ interface PendingUpdate {
|
||||
retryCount: number;
|
||||
}
|
||||
|
||||
// const DEBUG = true
|
||||
// const log = (...args: any[]) => {
|
||||
// if (DEBUG) console.log("[ProductPage]", ...args)
|
||||
// }
|
||||
|
||||
export default function ProductPageContent({ slug }: ProductDetailProps) {
|
||||
const [localQuantity, setLocalQuantity] = useState(1);
|
||||
@@ -68,7 +72,7 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
|
||||
refetch: refetchProduct,
|
||||
} = useProductsBySlug(slug);
|
||||
const { isFavorite, isLoading: isFavLoading } = useIsFavorite(
|
||||
product?.id || 0
|
||||
product?.id || 0,
|
||||
);
|
||||
const cartOptions = useMemo(
|
||||
() => ({
|
||||
@@ -76,7 +80,7 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
|
||||
refetchOnWindowFocus: true,
|
||||
staleTime: 0,
|
||||
}),
|
||||
[]
|
||||
[],
|
||||
);
|
||||
const { mutate: toggleFavoriteMutation } = useToggleFavorite();
|
||||
const {
|
||||
@@ -96,7 +100,7 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
|
||||
|
||||
const cartItem = useMemo(() => {
|
||||
const item = cartData?.data?.find(
|
||||
(item: any) => item.product?.id === product?.id
|
||||
(item: any) => item.product?.id === product?.id,
|
||||
);
|
||||
|
||||
return item;
|
||||
@@ -105,19 +109,29 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
|
||||
const isInCart = !!cartItem;
|
||||
const availableStock = product?.stock || 0;
|
||||
|
||||
const imageUrls = useMemo(
|
||||
() =>
|
||||
product?.media?.map(
|
||||
(m) => m.images_800x800 || m.images_720x720 || m.thumbnail
|
||||
) || [],
|
||||
[product]
|
||||
);
|
||||
const imageUrls = useMemo(() => {
|
||||
if (!product?.media || product.media.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const urls = product.media
|
||||
.map((m) => {
|
||||
const url =
|
||||
m.images_800x800 ||
|
||||
m.images_720x720 ||
|
||||
m.images_400x400 ||
|
||||
m.thumbnail;
|
||||
return url;
|
||||
})
|
||||
.filter(Boolean);
|
||||
return urls;
|
||||
}, [product]);
|
||||
|
||||
const reviews = useMemo(() => product?.reviews_resources || [], [product]);
|
||||
const averageRating = useMemo(
|
||||
() =>
|
||||
product?.reviews?.rating ? Number.parseFloat(product.reviews.rating) : 0,
|
||||
[product]
|
||||
[product],
|
||||
);
|
||||
|
||||
const transformedRelatedProducts = useMemo(() => {
|
||||
@@ -169,13 +183,13 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
|
||||
};
|
||||
sessionStorage.setItem(
|
||||
PENDING_PRODUCT_UPDATES_KEY,
|
||||
JSON.stringify(pending)
|
||||
JSON.stringify(pending),
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Failed to save pending update:", error);
|
||||
}
|
||||
},
|
||||
[product?.id]
|
||||
[product?.id],
|
||||
);
|
||||
|
||||
const clearPendingUpdate = useCallback(() => {
|
||||
@@ -190,7 +204,7 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
|
||||
} else {
|
||||
sessionStorage.setItem(
|
||||
PENDING_PRODUCT_UPDATES_KEY,
|
||||
JSON.stringify(pending)
|
||||
JSON.stringify(pending),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -221,7 +235,7 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
|
||||
syncToServerRef.current?.(quantity);
|
||||
}, delay);
|
||||
},
|
||||
[t]
|
||||
[t],
|
||||
);
|
||||
|
||||
retrySyncRef.current = retrySync;
|
||||
@@ -284,7 +298,7 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
|
||||
cartItem,
|
||||
clearPendingUpdate,
|
||||
t,
|
||||
]
|
||||
],
|
||||
);
|
||||
|
||||
syncToServerRef.current = syncToServer;
|
||||
@@ -397,7 +411,7 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
|
||||
toast.success(
|
||||
data?.wasAdded
|
||||
? t("added_to_favorites")
|
||||
: t("removed_from_favorites")
|
||||
: t("removed_from_favorites"),
|
||||
);
|
||||
},
|
||||
onError: () => {
|
||||
@@ -405,10 +419,10 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
|
||||
description: "Try again later",
|
||||
});
|
||||
},
|
||||
}
|
||||
},
|
||||
);
|
||||
},
|
||||
[product?.id, isFavorite, toggleFavoriteMutation, t]
|
||||
[product?.id, isFavorite, toggleFavoriteMutation, t],
|
||||
);
|
||||
|
||||
const handleSubmitReview = useCallback(
|
||||
@@ -438,7 +452,7 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
|
||||
});
|
||||
}
|
||||
},
|
||||
[product?.id, submitReviewMutation, refetchProduct, t]
|
||||
[product?.id, submitReviewMutation, refetchProduct, t],
|
||||
);
|
||||
|
||||
const loadingSkeleton = useMemo(
|
||||
@@ -460,7 +474,7 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
[]
|
||||
[],
|
||||
);
|
||||
|
||||
if (productLoading) return loadingSkeleton;
|
||||
@@ -520,14 +534,14 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* <ProductReviewsSection
|
||||
<ProductReviewsSection
|
||||
reviews={reviews}
|
||||
averageRating={averageRating}
|
||||
isLoading={false}
|
||||
onWriteReview={() => setShowReviewModal(true)}
|
||||
/>
|
||||
|
||||
<RelatedProductsSection products={transformedRelatedProducts} /> */}
|
||||
<RelatedProductsSection products={transformedRelatedProducts} />
|
||||
</div>
|
||||
|
||||
<StockLimitModal
|
||||
|
||||
@@ -38,122 +38,150 @@ export function ProductPurchaseCard({
|
||||
onToggleFavorite,
|
||||
t,
|
||||
}: ProductPurchaseCardProps) {
|
||||
const isOutOfStock = productStock === 0;
|
||||
|
||||
return (
|
||||
<div className="lg:w-[380px] space-y-4">
|
||||
<Card className="p-6 rounded-xl">
|
||||
<div className="flex justify-between items-start mb-6">
|
||||
<span className="text-lg text-gray-500">{t("price")}:</span>
|
||||
<div className="lg:w-[420px] space-y-4">
|
||||
<Card className="p-6 rounded-lg border border-gray-200 shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||||
{/* Price Section */}
|
||||
<div className="flex justify-between items-baseline mb-3 pb-4 border-b border-gray-100 ">
|
||||
<span className="text-lg font-medium text-gray-600">
|
||||
{t("price")}:
|
||||
</span>
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-3xl font-bold text-primary">{price} TMT</span>
|
||||
<span className="text-4xl font-bold text-gray-900 tracking-tight">
|
||||
{price}{" "}
|
||||
<span className="text-2xl font-semibold text-gray-500">TMT</span>
|
||||
</span>
|
||||
{oldPrice && parseFloat(oldPrice) > 0 && (
|
||||
<span className="text-lg text-gray-400 line-through">
|
||||
<span className="text-lg text-gray-400 line-through mt-1">
|
||||
{oldPrice} TMT
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{/* Action Buttons Section */}
|
||||
<div className="space-y-3">
|
||||
{isInCart ? (
|
||||
<>
|
||||
{/* Go to Cart Button */}
|
||||
<Link href="/cart">
|
||||
<Button
|
||||
size="lg"
|
||||
className="w-full rounded-lg cursor-pointer text-lg font-bold bg-green-600 hover:bg-green-700 mb-4"
|
||||
className="w-full h-12 rounded-[10px] cursor-pointer text-lg font-bold bg-gradient-to-r from-emerald-600 to-emerald-500 hover:from-emerald-700 hover:to-emerald-600 shadow-md hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
<ShoppingCart className="mr-2 h-5 w-5" />
|
||||
{t("go_to_cart")}
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Quantity Controls */}
|
||||
<div className="flex items-center gap-3 pt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={onQuantityDecrease}
|
||||
disabled={isSyncing}
|
||||
className={`rounded-lg cursor-pointer h-12 w-12 ${
|
||||
isSyncing ? "opacity-70" : ""
|
||||
className={`rounded-[10px] h-12 w-12 border-2 border-gray-200 hover:border-gray-900 hover:bg-gray-50 transition-all duration-200 disabled:opacity-30 disabled:cursor-not-allowed ${
|
||||
isSyncing ? "opacity-50" : ""
|
||||
}`}
|
||||
>
|
||||
<Minus className="h-5 w-5" />
|
||||
<Minus className="h-5 w-5 text-gray-700" />
|
||||
</Button>
|
||||
<div className="flex-1 text-center font-semibold text-xl border rounded-xl h-12 flex items-center justify-center relative">
|
||||
{localQuantity}
|
||||
|
||||
<div className="flex-1 text-center font-semibold text-2xl border-2 border-gray-200 rounded-[10px] h-12 flex items-center justify-center bg-white relative">
|
||||
{isSyncing ? (
|
||||
<div className="absolute inset-0 bg-white/80 rounded-2xl flex items-center justify-center">
|
||||
<div className="w-5 h-5 border-2 border-gray-300 border-t-gray-900 rounded-full animate-spin" />
|
||||
</div>
|
||||
) : null}
|
||||
<span className={isSyncing ? "opacity-30" : ""}>
|
||||
{localQuantity}
|
||||
</span>
|
||||
{syncError && (
|
||||
<span
|
||||
className="absolute -top-1 -right-1 h-2 w-2 bg-red-500 rounded-full"
|
||||
className="absolute -top-1 -right-1 h-3 w-3 bg-red-500 rounded-full border-2 border-white shadow-sm"
|
||||
title="Sync error"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={onQuantityIncrease}
|
||||
disabled={isSyncing}
|
||||
className={`rounded-lg cursor-pointer h-12 w-12 ${
|
||||
isSyncing ? "opacity-70" : ""
|
||||
disabled={isSyncing || localQuantity >= availableStock}
|
||||
className={`rounded-[10px] h-12 w-12 border-2 border-gray-900 bg-gray-900 hover:bg-gray-800 transition-all duration-200 disabled:opacity-30 disabled:cursor-not-allowed ${
|
||||
isSyncing ? "opacity-50" : ""
|
||||
}`}
|
||||
>
|
||||
<Plus className="h-5 w-5" />
|
||||
<Plus className="h-5 w-5 text-white" />
|
||||
</Button>
|
||||
|
||||
|
||||
{/* Favorite Button - In Cart */}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={onToggleFavorite}
|
||||
className={`rounded-lg h-12 w-12 transition-all border cursor-pointer ${
|
||||
className={`rounded-[10px] h-12 w-12 transition-all duration-200 border-2 cursor-pointer ${
|
||||
isFavorite
|
||||
? "bg-[#F0F8FF] border-blue-300 hover:bg-blue-100"
|
||||
: "hover:bg-gray-50"
|
||||
? "bg-rose-50 border-rose-200 hover:bg-rose-100 hover:border-rose-300"
|
||||
: "border-gray-200 hover:border-gray-900 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<Heart
|
||||
className={`h-6! w-6! transition-all ${
|
||||
className={`h-6 w-6 transition-all duration-200 ${
|
||||
isFavorite
|
||||
? "fill-[#005bff] text-[#005bff]"
|
||||
: "text-[#005bff]"
|
||||
? "fill-rose-500 text-rose-500 scale-110"
|
||||
: "text-gray-700 hover:text-rose-500"
|
||||
}`}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Add to Cart Button */}
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={onAddToCart}
|
||||
disabled={isSyncing || productStock === 0}
|
||||
className="flex-1 rounded-lg text-lg font-bold bg-[#005bff] hover:bg-[#0041c4] cursor-pointer"
|
||||
disabled={isSyncing || isOutOfStock}
|
||||
className={`flex-1 h-12 rounded-[10px] text-lg font-bold shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer ${
|
||||
isOutOfStock
|
||||
? "bg-gray-300 text-gray-600 cursor-not-allowed"
|
||||
: "bg-gradient-to-r from-gray-900 to-gray-800 hover:from-gray-800 hover:to-gray-700"
|
||||
}`}
|
||||
>
|
||||
{isSyncing ? (
|
||||
<>{t("adding")}</>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
<span>{t("adding")}</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<ShoppingCart className="mr-2 h-5 w-5" />
|
||||
{productStock === 0 ? t("out_of_stock") : t("add_to_cart")}
|
||||
{isOutOfStock ? t("out_of_stock") : t("add_to_cart")}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
|
||||
{/* Favorite Button - Not in Cart */}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={onToggleFavorite}
|
||||
className={`rounded-lg h-12 w-12 transition-all border cursor-pointer ${
|
||||
className={`rounded-[10px] h-12 w-12 transition-all duration-200 border-2 cursor-pointer ${
|
||||
isFavorite
|
||||
? "bg-[#F0F8FF] border-blue-300 hover:bg-blue-100"
|
||||
: "hover:bg-gray-50"
|
||||
? "bg-rose-50 border-rose-200 hover:bg-rose-100 hover:border-rose-300"
|
||||
: "border-gray-200 hover:border-gray-900 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<Heart
|
||||
className={`h-6! w-6! transition-all ${
|
||||
className={`h-6 w-6 transition-all duration-200 ${
|
||||
isFavorite
|
||||
? "fill-[#005bff] text-[#005bff]"
|
||||
: "text-[#005bff]"
|
||||
? "fill-rose-500 text-rose-500 scale-110"
|
||||
: "text-gray-700 hover:text-rose-500"
|
||||
}`}
|
||||
/>
|
||||
</Button>
|
||||
@@ -161,8 +189,6 @@ export function ProductPurchaseCard({
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user