danak/mehraein-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui product detail page

Browse Source
This commit is contained in:
hamid zarghami
2026-07-21 11:36:50 +03:30
parent ec39e4448d
commit 220f749598
2 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/product/components/ProductDetail.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ const ProductDetail: FC = () => {
<ProductBreadcrumb /> <ProductBreadcrumb />
<div className="px-4 py-6 sm:px-8 sm:py-8 lg:px-30"> <div className="px-4 py-6 sm:px-8 sm:py-8 lg:px-30">
<div className="flex flex-col items-start gap-5 lg:flex-row lg:gap-6"> <div className="flex flex-col items-start gap-8 lg:flex-row lg:items-start lg:gap-10">
<ProductGallery images={PRODUCT_GALLERY_IMAGES} alt={PRODUCT_TITLE} /> <ProductGallery images={PRODUCT_GALLERY_IMAGES} alt={PRODUCT_TITLE} />
<div className="flex w-full min-w-0 flex-1 flex-col items-end"> <div className="flex w-full min-w-0 flex-1 flex-col items-end">
<ProductPurchaseOptions selectedTier={selectedTier} onSelectTier={setSelectedTier} /> <ProductPurchaseOptions selectedTier={selectedTier} onSelectTier={setSelectedTier} />
app/product/components/ProductGallery.tsx
+9 -6
View File
@@ -13,12 +13,12 @@ const ProductGallery: FC<ProductGalleryProps> = ({ images, alt }) => {
const [activeIndex, setActiveIndex] = useState(0); const [activeIndex, setActiveIndex] = useState(0);
return ( return (
<div className="flex w-full shrink-0 flex-col gap-2.5 sm:gap-3 lg:w-[42%] lg:max-w-100"> <div className="flex w-full shrink-0 flex-col gap-3 lg:w-[45%] lg:max-w-120">
<div className="relative aspect-square w-full overflow-hidden rounded-xl sm:rounded-2xl"> <div className="relative aspect-square w-full overflow-hidden rounded-2xl bg-[#F7FAFC]">
<Image src={images[activeIndex]} alt={alt} fill priority className="object-cover" sizes="(max-width: 1024px) 100vw, 400px" /> <Image src={images[activeIndex]} alt={alt} fill priority className="object-contain p-4" sizes="(max-width: 1024px) 100vw, 480px" />
</div> </div>
<div className="grid grid-cols-4 gap-2 sm:gap-2.5"> <div className="grid grid-cols-4 gap-2.5">
{images.slice(0, 4).map((image, index) => ( {images.slice(0, 4).map((image, index) => (
<button <button
key={index} key={index}
@@ -26,9 +26,12 @@ const ProductGallery: FC<ProductGalleryProps> = ({ images, alt }) => {
aria-label={`تصویر ${index + 1}`} aria-label={`تصویر ${index + 1}`}
aria-pressed={activeIndex === index} aria-pressed={activeIndex === index}
onClick={() => setActiveIndex(index)} onClick={() => setActiveIndex(index)}
className={cn("relative aspect-square overflow-hidden rounded-lg transition-shadow sm:rounded-xl", activeIndex === index && "ring-2 ring-primary ring-offset-1")} className={cn(
"relative aspect-square overflow-hidden rounded-xl border-2 bg-[#F7FAFC] transition-colors",
activeIndex === index ? "border-primary" : "border-transparent",
)}
> >
<Image src={image} alt="" fill className="object-cover" sizes="(max-width: 1024px) 22vw, 96px" /> <Image src={image} alt="" fill className="object-contain p-1" sizes="(max-width: 1024px) 22vw, 96px" />
</button> </button>
))} ))}
</div> </div>