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

banner

Browse Source
This commit is contained in:
hamid zarghami
2025-09-18 13:20:16 +03:30
parent 7b51a18a4a
commit 4ed55bd1b7
13 changed files with 308 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/compare/page.tsx
+102 -54
View File
@@ -1,62 +1,109 @@
'use client'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import Layout from '@/hoc/Layout'
import { NextPage } from 'next'
import Image from 'next/image'
import { useSearchParams } from 'next/navigation'
import { useEffect, useState } from 'react';
import { useGetCompare } from './hooks/useCompareData'
import { useLocalCart } from '@/app/product/hooks/useLocalCart'
import { toast } from '@/components/Toast'
import { CompareProduct } from './types/Types'
import { useSharedStore } from '@/share/store/sharedStore'
const ComparePage: NextPage = () => {
const [productIds, setProductIds] = useState<string[]>([]);
const search = useSearchParams()
const { data, isLoading } = useGetCompare(productIds)
const { addToLocalCart } = useLocalCart()
const { isLogin } = useSharedStore()
const products = data?.results?.products || []
const handleAddToCart = (product: CompareProduct) => {
if (!isLogin) {
toast('لطفا ابتدا وارد حساب کاربری خود شوید', 'error')
return
}
if (!product._id || !product.default_variant?._id) return
addToLocalCart(product._id, product.default_variant._id, 1)
toast('محصول به سبد خرید اضافه شد', 'success')
}
useEffect(() => {
const productId = search.get('productId')
if (productId) {
setProductIds([productId]);
}
}, [search]);
if (isLoading) {
return (
<Layout>
<div className='mt-24 px-20'>
<div className='flex justify-center items-center min-h-[400px]'>
<div className='text-center'>
<div className='animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto'></div>
<p className='mt-4 text-gray-600'>در حال بارگذاری...</p>
</div>
</div>
</div>
</Layout>
)
}
if (products.length === 0) {
return (
<Layout>
<div className='mt-24 px-20'>
<div className='flex justify-center items-center min-h-[400px]'>
<div className='text-center'>
<p className='text-gray-600'>هیچ محصولی برای مقایسه انتخاب نشده است</p>
</div>
</div>
</div>
</Layout>
)
}
return (
<Layout>
<div className='mt-24 px-20'>
<div className='flex border-b border-border'>
<div className='w-[300px] flex flex-col justify-center items-center border-l border-border pb-5'>
<Image
src='https://shinan.storage.iran.liara.space/media-file/30661b3bde87834d3feae30953d5fc63232d78f181e7fed0.png'
alt='compare'
width={150}
height={150}
className='max-w-[100px] max-h-[100px] object-contain'
/>
{products.map((product, index) => (
<div key={product._id} className={`w-[300px] flex flex-col justify-center items-center ${index < products.length - 1 ? 'border-l border-border' : ''} pb-5`}>
<Image
src={product.imagesUrl.cover}
alt={product.title_fa}
width={150}
height={150}
className='max-w-[100px] max-h-[100px] object-contain'
/>
<div className='mt-6 font-light text-sm'>
رومیزی سندس کد T-2112 طرح فرش
</div>
<div className='mt-6 font-light text-sm text-center'>
{product.title_fa}
</div>
<div className='mt-8 text-sm font-light'>
260,000 <span className='text-[10px]'>تومان</span>
</div>
<div className='mt-8 text-sm font-light'>
{product.default_variant.price.selling_price.toLocaleString()} <span className='text-[10px]'>تومان</span>
</div>
<div className='mt-5'>
<Button
>
افزودن به سبد
</Button>
<div className='mt-5'>
<Button
onClick={() => handleAddToCart(product)}
disabled={!product.default_variant.stock}
className={!product.default_variant.stock ? 'opacity-50 cursor-not-allowed' : ''}
>
{product.default_variant.stock > 0 ? 'افزودن به سبد' : 'ناموجود'}
</Button>
</div>
</div>
</div>
<div className='w-[300px] flex flex-col justify-center items-center border-l border-border pb-5'>
<Image
src='https://shinan.storage.iran.liara.space/media-file/30661b3bde87834d3feae30953d5fc63232d78f181e7fed0.png'
alt='compare'
width={150}
height={150}
className='max-w-[100px] max-h-[100px] object-contain'
/>
<div className='mt-6 font-light text-sm'>
رومیزی سندس کد T-2112 طرح فرش
</div>
<div className='mt-8 text-sm font-light'>
260,000 <span className='text-[10px]'>تومان</span>
</div>
<div className='mt-5'>
<Button
>
افزودن به سبد
</Button>
</div>
</div>
))}
</div>
<div className='mt-8'>
@@ -65,19 +112,20 @@ const ComparePage: NextPage = () => {
</div>
</div>
<div className='mt-9 border-b border-border pb-7'>
<div className='text-[#999999] text-sm'>وزن</div>
{products[0]?.specifications?.map((spec, specIndex) => (
<div key={specIndex} className='mt-9 border-b border-border pb-7'>
<div className='text-[#999999] text-sm'>{spec.title}</div>
<div className='flex mt-6 font-light'>
<div className='w-[300px]'>
350 g
</div>
<div className='w-[300px] flex gap-6'>
<Separator orientation='vertical' />
350 g
<div className='flex mt-6 font-light'>
{products.map((product, productIndex) => (
<div key={product._id} className='w-[300px] flex items-center'>
{product.specifications?.[specIndex]?.values?.join(', ') || '-'}
{productIndex < products.length - 1 && <Separator orientation='vertical' className='ml-6' />}
</div>
))}
</div>
</div>
</div>
))}
</div>
</Layout>
)