comment + favorive
This commit is contained in:
hamid zarghami
@@ -1,85 +1,137 @@
|
||||
'use client'
|
||||
import Layout from '@/hoc/Layout'
|
||||
import { NextPage } from 'next'
|
||||
import Menu from '../components/Menu'
|
||||
import Image from 'next/image'
|
||||
import PageLoading from '@/components/PageLoading'
|
||||
import { useGetComments } from '../hooks/useProfileData'
|
||||
import { Comment } from '../types/ProfileTypes'
|
||||
import Rate from 'rc-rate'
|
||||
|
||||
const CommentItem: React.FC<{ comment: Comment }> = ({ comment }) => {
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString)
|
||||
return date.toLocaleDateString('fa-IR', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='bg-white rounded-[20px] p-4 sm:p-6 mb-4 sm:mb-6 shadow-sm border border-border'>
|
||||
<div className='flex flex-col sm:flex-row gap-4 sm:gap-6'>
|
||||
<div className='flex justify-center sm:justify-start'>
|
||||
<Image
|
||||
src={comment.product.imagesUrl.cover || 'https://picsum.photos/200/300'}
|
||||
alt={comment.product.title_fa}
|
||||
width={120}
|
||||
height={120}
|
||||
className='max-w-[100px] sm:max-w-[120px] max-h-[100px] sm:max-h-[120px] object-contain rounded-lg'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex-1'>
|
||||
<div className='flex flex-col sm:flex-row sm:items-start justify-between gap-2 mb-3'>
|
||||
<h3 className='text-sm sm:text-base font-medium text-[#383E43] leading-5'>
|
||||
{comment.product.title_fa}
|
||||
</h3>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Rate value={comment.rate} disabled />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-wrap items-center gap-2 text-xs text-[#999999] mb-4'>
|
||||
<span>{comment.user.fullName}</span>
|
||||
<span className="size-1 rounded-full bg-[#E5E5E5]"></span>
|
||||
<span>{formatDate(comment.createdAt)}</span>
|
||||
<span className="size-1 rounded-full bg-[#E5E5E5]"></span>
|
||||
<span className='px-2 py-0.5 rounded bg-[#F1F1F1] text-[#7F7F7F]'>خریدار</span>
|
||||
</div>
|
||||
|
||||
{comment.title && (
|
||||
<div className='text-sm font-medium text-[#333333] mb-2'>
|
||||
{comment.title}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{comment.content && (
|
||||
<div className='text-xs sm:text-sm text-[#666666] leading-6 sm:leading-7 mb-3'>
|
||||
{comment.content}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className='grid grid-cols-1 sm:grid-cols-2 gap-3'>
|
||||
{comment.advantage && comment.advantage.length > 0 && (
|
||||
<div className='bg-green-50 rounded-lg p-3'>
|
||||
<div className='text-xs sm:text-sm text-green-700 font-medium mb-2'>مزایا:</div>
|
||||
<ul className='text-xs sm:text-sm text-green-600 space-y-1'>
|
||||
{comment.advantage.map((adv, index) => (
|
||||
<li key={index} className='flex items-start gap-2'>
|
||||
<span className='text-green-500 mt-0.5'>•</span>
|
||||
<span>{adv}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{comment.disAdvantage && comment.disAdvantage.length > 0 && (
|
||||
<div className='bg-red-50 rounded-lg p-3'>
|
||||
<div className='text-xs sm:text-sm text-red-700 font-medium mb-2'>معایب:</div>
|
||||
<ul className='text-xs sm:text-sm text-red-600 space-y-1'>
|
||||
{comment.disAdvantage.map((disadv, index) => (
|
||||
<li key={index} className='flex items-start gap-2'>
|
||||
<span className='text-red-500 mt-0.5'>•</span>
|
||||
<span>{disadv}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Comments: NextPage = () => {
|
||||
|
||||
const { data: comments, isLoading } = useGetComments()
|
||||
|
||||
if (isLoading) {
|
||||
return <PageLoading />
|
||||
}
|
||||
|
||||
if (!comments?.results?.comments?.length) {
|
||||
return (
|
||||
<div className='p-3 sm:p-4 md:p-6'>
|
||||
<Menu pageActive='comments' />
|
||||
<div className='mt-6 sm:mt-8 md:mt-10 lg:mt-14'>
|
||||
|
||||
<div className='bg-white rounded-[20px] p-8 sm:p-12 text-center shadow-sm border border-border'>
|
||||
<div className='text-lg sm:text-xl text-gray-600 mb-2'>
|
||||
کامنتی یافت نشد
|
||||
</div>
|
||||
<div className='text-sm text-gray-500'>
|
||||
شما هنوز کامنتی ثبت نکردهاید
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='p-3 sm:p-4 md:p-6'>
|
||||
<Menu pageActive='comments' />
|
||||
|
||||
<div className='mt-6 sm:mt-8 md:mt-10 lg:mt-14'>
|
||||
<div className='flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-6 border-b border-border pb-4 sm:pb-6'>
|
||||
<Image
|
||||
src='https://picsum.photos/200/300'
|
||||
alt='comment'
|
||||
width={100}
|
||||
height={100}
|
||||
className='max-w-16 sm:max-w-20 max-h-16 sm:max-h-20 object-contain mx-auto sm:mx-0'
|
||||
/>
|
||||
|
||||
<div className='flex-1'>
|
||||
<div className='border-b border-border pb-3 sm:pb-4'>
|
||||
<div className='text-sm sm:text-base'>
|
||||
نان بربری سنتی سبوس دار
|
||||
</div>
|
||||
<div className='mt-1.5 text-xs sm:text-sm text-[#999999]'>
|
||||
2 آذر 1401
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-3 sm:mt-4 text-[#4C4C4C] text-xs sm:text-sm'>
|
||||
خیلی راضیم از خریدم
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-6 border-b border-border py-4 sm:py-6'>
|
||||
<Image
|
||||
src='https://picsum.photos/200/300'
|
||||
alt='comment'
|
||||
width={100}
|
||||
height={100}
|
||||
className='max-w-16 sm:max-w-20 max-h-16 sm:max-h-20 object-contain mx-auto sm:mx-0'
|
||||
/>
|
||||
|
||||
<div className='flex-1'>
|
||||
<div className='border-b border-border pb-3 sm:pb-4'>
|
||||
<div className='text-sm sm:text-base'>
|
||||
نان بربری سنتی سبوس دار
|
||||
</div>
|
||||
<div className='mt-1.5 text-xs sm:text-sm text-[#999999]'>
|
||||
2 آذر 1401
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-3 sm:mt-4 text-[#4C4C4C] text-xs sm:text-sm'>
|
||||
خیلی راضیم از خریدم
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-6 border-b border-border py-4 sm:py-6'>
|
||||
<Image
|
||||
src='https://picsum.photos/200/300'
|
||||
alt='comment'
|
||||
width={100}
|
||||
height={100}
|
||||
className='max-w-16 sm:max-w-20 max-h-16 sm:max-h-20 object-contain mx-auto sm:mx-0'
|
||||
/>
|
||||
|
||||
<div className='flex-1'>
|
||||
<div className='border-b border-border pb-3 sm:pb-4'>
|
||||
<div className='text-sm sm:text-base'>
|
||||
نان بربری سنتی سبوس دار
|
||||
</div>
|
||||
<div className='mt-1.5 text-xs sm:text-sm text-[#999999]'>
|
||||
2 آذر 1401
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-3 sm:mt-4 text-[#4C4C4C] text-xs sm:text-sm'>
|
||||
خیلی راضیم از خریدم
|
||||
</div>
|
||||
</div>
|
||||
<div className='space-y-4 sm:space-y-6'>
|
||||
{comments?.results?.comments.map((comment) => (
|
||||
<CommentItem key={comment._id} comment={comment} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user