diff --git a/src/app/product/[id]/page.tsx b/src/app/product/[id]/page.tsx index 83a3cc8..6108e9d 100644 --- a/src/app/product/[id]/page.tsx +++ b/src/app/product/[id]/page.tsx @@ -8,10 +8,14 @@ import { BreadcrumbPage, BreadcrumbSeparator, } from '@/components/ui/breadcrumb' -import ProductImage from '../components/ProductImage' -import BaseInformation from '../components/BaseInformation' -import ShopInformation from '../components/ShopInformation' -import Specifications from '../components/Specifications' +import ProductImage from '@/app/product/components/ProductImage' +import BaseInformation from '@/app/product/components/BaseInformation' +import ShopInformation from '@/app/product/components/ShopInformation' +import Specifications from '@/app/product/components/Specifications' +import ProsCons from '@/app/product/components/ProsCons' +import Description from '@/app/product/components/Description' +import Reviews from '@/app/product/components/Reviews' +import Questions from '@/app/product/components/Questions' const SingleProduct: NextPage = () => { return ( @@ -36,15 +40,21 @@ const SingleProduct: NextPage = () => {
فروشنده شوید
-
- - +
-
- -
- -
+
+
+ + +
+
+ + + + + +
+
) diff --git a/src/app/product/components/Description.tsx b/src/app/product/components/Description.tsx new file mode 100644 index 0000000..e788484 --- /dev/null +++ b/src/app/product/components/Description.tsx @@ -0,0 +1,30 @@ +import { FC } from 'react' + +const DESCRIPTION: string[] = [ + 'همواره گوشی‌های هوشمند پرچمدار سامسونگ توانسته‌اند با بهره بردن از مشخصات فنی قدرتمند، توجه هر بیننده‌ای را به خود جلب کنند. سامسونگ Galaxy S24 Ultra نیز از این قاعده مستثنا نیست و با نمایشگری باکیفیت، پردازنده پرتوان و سیستم دوربین قدرتمند به میدان آمده است.', + 'صفحه‌نمایش 6.8 اینچی این گوشی با رزولوشن 1440×3120 پیکسل و نرخ نوسازی 120 هرتز، تجربه‌ای روان و چشم‌نواز ارائه می‌دهد. در بخش دوربین نیز سنسور اصلی 200 مگاپیکسلی در کنار سنسور 12 مگاپیکسلی فوق‌عریض و سنسور تله‌فوتو با بزرگنمایی اپتیکال 3 برابر، ثبت تصاویر با جزئیات و داینامیک رنج عالی را ممکن کرده است.', + 'ترکیب این سخت‌افزار قدرتمند با نرم‌افزار بهینه، باعث شده که Galaxy S24 Ultra انتخاب مناسبی برای بازی، عکاسی و استفاده روزمره باشد. اگر به دنبال گوشی‌ای با کارایی بالا و امکانات کامل هستید، این مدل می‌تواند گزینه‌ای ایده‌آل برای شما باشد.' +] + +const Description: FC = () => { + return ( +
+
+

توضیحات

+
+
+ +
+
+ {DESCRIPTION.map((paragraph) => ( +

{paragraph}

+ ))} +
+
+
+ ) +} + +export default Description + + diff --git a/src/app/product/components/ProsCons.tsx b/src/app/product/components/ProsCons.tsx new file mode 100644 index 0000000..68874ac --- /dev/null +++ b/src/app/product/components/ProsCons.tsx @@ -0,0 +1,62 @@ +import { FC } from 'react' +import { Separator } from '@/components/ui/separator' + +const PROS: string[] = [ + 'مجهز به حس‌گر اثرانگشت', + 'مقاوم در برابر آب', + 'مناسب بازی', + 'مناسب عکاسی', + 'مناسب عکاسی سلفی', +] + +const CONS: string[] = [ + 'وزن نسبتاً بالا', + 'عدم وجود شارژر در جعبه', +] + +const ProsCons: FC = () => { + return ( +
+
+

نقاط مثبت و منفی

+
+
+ +
+
+
+ نقاط مثبت + +
+
+
+ {PROS.map((v) => ( +
{v}
+ ))} +
+
+
+ + + +
+
+ نقاط منفی + +
+
+
+ {CONS.map((v) => ( +
{v}
+ ))} +
+
+
+
+
+ ) +} + +export default ProsCons + + diff --git a/src/app/product/components/Questions.tsx b/src/app/product/components/Questions.tsx new file mode 100644 index 0000000..6aa100d --- /dev/null +++ b/src/app/product/components/Questions.tsx @@ -0,0 +1,147 @@ +'use client' + +import { FC, Fragment, useMemo, useState } from 'react' +import { Button } from '@/components/ui/button' +import { ArrowDown2, MessageQuestion } from 'iconsax-react' + +type AnswerItem = { + id: number + text: string +} + +type QuestionItem = { + id: number + text: string + answers: AnswerItem[] +} + +const QUESTIONS: QuestionItem[] = [ + { + id: 1, + text: 'سلام ویتنام هست یا هند؟', + answers: [], + }, + { + id: 2, + text: + 'سلام من دوتا اپلیکیشن همراه بانک نصب نمیشه، دلیلش چیه؟ همچنین مشکل برای کسی پیش اومده؟', + answers: [ + { id: 1, text: 'مشکل از همراه بانک‌های هست که با نسخه جدید طراحی نشدن' }, + { id: 2, text: 'اپ رو آپدیت کنید یا کش رو پاک کنید، برای من حل شد' }, + ], + }, + { + id: 3, + text: 'وزن چطاست؟ ویتنام که نیست؟', + answers: [ + { id: 1, text: 'زیر عکس که نوشتند ویتنام' }, + ], + }, +] + +const Questions: FC = () => { + const [sort, setSort] = useState<'new' | 'answers'>('new') + const [expandedId, setExpandedId] = useState(null) + + const sorted = useMemo(() => { + if (sort === 'new') return [...QUESTIONS].sort((a, b) => b.id - a.id) + return [...QUESTIONS].sort((a, b) => b.answers.length - a.answers.length) + }, [sort]) + + return ( +
+
+

پرسش‌ها

+
+
+ +
+
+
+ مرتب سازی بر اساس: +
+ + +
+
+ +
+ {sorted.map((q) => ( + +
+
+
+
+ +
+
+
+ {q.text} +
+
+ + {q.answers.length === 0 && ( +
ثبت پاسخ
+ )} + + {q.answers.length > 0 && ( +
+ {(expandedId === q.id ? q.answers : q.answers.slice(0, 1)).map((a) => ( +
+
پاسخ
+
+ {a.text} +
+
+ ))} + + {q.answers.length > 1 && ( + + )} +
+ )} +
+ {/* rows divided by parent divide-y */} + + ))} +
+
+ +
+
+
پرسش‌ها
+
+ شما هم درباره این کالا پرسش خود را ثبت کنید +
+ +
+
+
+
+ ) +} + +export default Questions + + diff --git a/src/app/product/components/Reviews.tsx b/src/app/product/components/Reviews.tsx new file mode 100644 index 0000000..f20dc96 --- /dev/null +++ b/src/app/product/components/Reviews.tsx @@ -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 ( +
+
+

نظرات خریداران

+
+
+ +
+
+
+ مرتب سازی بر اساس: +
+ + +
+
+ +
+ {sortedReviews.map((r, idx) => ( +
+
+
{r.rating}
+
+ {r.isBuyer && ( + خریدار + )} + + {r.date} + + {r.author} +
+
+ +
{r.text}
+ + {idx !== sortedReviews.length - 1 &&
} +
+ ))} +
+
+ +
+
+
نظرات خریداران
+
+ +
+ {average} + / 5 +
+
+
+ شما هم درباره این کالا نظر خود را ثبت کنید. نظر شما پس از بررسی و تایید نمایش داده می‌شود. +
+ +
+
+
+
+ ) +} + +export default Reviews + + diff --git a/src/app/product/components/ShopInformation.tsx b/src/app/product/components/ShopInformation.tsx index 52f1b5e..2bc8275 100644 --- a/src/app/product/components/ShopInformation.tsx +++ b/src/app/product/components/ShopInformation.tsx @@ -5,7 +5,7 @@ import React from 'react' const ShopInformation = () => { return ( -
+
فروشنده