review section + question section + prosCons section

2025-08-11 16:05:46 +03:30
parent 0af6006ca3
commit 92370259c1
6 changed files with 408 additions and 13 deletions
@@ -0,0 +1,146 @@
+'use client'
+import { FC, useMemo, useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import { Star1 } from 'iconsax-react'
+
+type ReviewItem = {
+    id: number
+    author: string
+    date: string
+    rating: number
+    text: string
+    isBuyer: boolean
+}
+
+const REVIEWS: ReviewItem[] = [
+    {
+        id: 1,
+        author: 'علی رضوانی',
+        date: '1401 آذر 18',
+        rating: 3.2,
+        text: 'قیمتش خوب بود',
+        isBuyer: true,
+    },
+    {
+        id: 2,
+        author: 'علی رضوانی',
+        date: '1401 آذر 18',
+        rating: 3.0,
+        text: 'گوشیشه همه چی تمام',
+        isBuyer: true,
+    },
+    {
+        id: 3,
+        author: 'علی رضوانی',
+        date: '1401 آذر 18',
+        rating: 1.5,
+        text: 'با کیفیت، خوش دست. بدون هیچ امتیاز قابل توجه نسبت به s23',
+        isBuyer: true,
+    },
+    {
+        id: 4,
+        author: 'علی رضوانی',
+        date: '1401 آذر 18',
+        rating: 4.0,
+        text: 'واقعاً گوشی فوق‌العاده‌ای هست هیچ نکته ی منفی ندارد',
+        isBuyer: true,
+    },
+]
+
+const Reviews: FC = () => {
+    const [sort, setSort] = useState<'new' | 'helpful'>('new')
+
+    const sortedReviews = useMemo(() => {
+        if (sort === 'new') {
+            return [...REVIEWS].sort((a, b) => b.id - a.id)
+        }
+        return [...REVIEWS].sort((a, b) => b.rating - a.rating)
+    }, [sort])
+
+    const average = useMemo(() => {
+        const sum = REVIEWS.reduce((acc, r) => acc + r.rating, 0)
+        return (sum / REVIEWS.length).toFixed(1)
+    }, [])
+
+    return (
+        <div className="mt-16 w-full">
+            <div className="flex items-center justify-end gap-3 flex-row-reverse">
+                <h2 className="text-primary text-lg">نظرات خریداران</h2>
+                <div className="w-1 h-6 bg-primary rounded"></div>
+            </div>
+
+            <div className="mt-6 grid grid-cols-12 gap-6">
+                <div className="col-span-12 md:col-span-9 md:order-last">
+                    <div className="flex items-center justify-start gap-4 text-sm text-[#7F7F7F]">
+                        <span>مرتب سازی بر اساس:</span>
+                        <div className="flex items-center gap-6">
+                            <button
+                                type="button"
+                                onClick={() => setSort('new')}
+                                className={
+                                    sort === 'new' ? 'text-primary font-medium' : 'text-[#B2B2B2] hover:text-primary'
+                                }
+                            >
+                                جدیدترین
+                            </button>
+                            <button
+                                type="button"
+                                onClick={() => setSort('helpful')}
+                                className={
+                                    sort === 'helpful' ? 'text-primary font-medium' : 'text-[#B2B2B2] hover:text-primary'
+                                }
+                            >
+                                مفیدترین
+                            </button>
+                        </div>
+                    </div>
+
+                    <div className="mt-6 rounded-xl bg-white">
+                        {sortedReviews.map((r, idx) => (
+                            <div key={r.id} className="px-6 py-5">
+                                <div className="flex items-center justify-start gap-3">
+                                    <div className="px-2 py-0.5 rounded-full bg-[#02A55A] text-white text-xs">{r.rating}</div>
+                                    <div className="flex items-center gap-2 text-xs text-[#999999]">
+                                        {r.isBuyer && (
+                                            <span className="px-2 py-0.5 rounded bg-[#F1F1F1] text-[#7F7F7F]">خریدار</span>
+                                        )}
+                                        <span className="size-1.5 rounded-full bg-[#E5E5E5]"></span>
+                                        <span>{r.date}</span>
+                                        <span className="size-1.5 rounded-full bg-[#E5E5E5]"></span>
+                                        <span>{r.author}</span>
+                                    </div>
+                                </div>
+
+                                <div className="mt-3 text-[#333333] text-sm leading-7 text-right">{r.text}</div>
+
+                                {idx !== sortedReviews.length - 1 && <div className="mt-5"> <Separator /> </div>}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+
+                <div className="col-span-12 md:col-span-3 order-first md:order-first">
+                    <div className=" rounded-[10px] p-6  h-fit md:sticky md:top-[170px]">
+                        <div className="text-primary text-sm">نظرات خریداران</div>
+                        <div className="mt-4 flex items-center justify-end gap-2">
+                            <Star1 size={18} color="#FFC107" variant="Bold" />
+                            <div className="text-sm">
+                                <span className="font-medium">{average}</span>
+                                <span className="text-[#7F7F7F]"> / 5</span>
+                            </div>
+                        </div>
+                        <div className="mt-4 text-xs text-[#7F7F7F] leading-6 text-justify">
+                            شما هم درباره این کالا نظر خود را ثبت کنید. نظر شما پس از بررسی و تایید نمایش داده می‌شود.
+                        </div>
+                        <Button className="w-full mt-5">ثبت دیدگاه</Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Reviews
+
+