77 lines
3.1 KiB
TypeScript
77 lines
3.1 KiB
TypeScript
import { type FC } from 'react'
|
||
import { Star1, DocumentText, Like1, Dislike } from 'iconsax-react'
|
||
import { useTranslation } from 'react-i18next'
|
||
import type { ReviewDetail } from '../types/Types'
|
||
|
||
interface ReviewContentSectionProps {
|
||
review: ReviewDetail
|
||
}
|
||
|
||
const ReviewContentSection: FC<ReviewContentSectionProps> = ({ review }) => {
|
||
const { t } = useTranslation('global')
|
||
|
||
return (
|
||
<div className='space-y-6'>
|
||
<div className='flex items-center gap-3 pb-6 border-b border-border'>
|
||
<div className='flex items-center gap-2'>
|
||
<Star1 size={24} color="#FFB800" variant="Bold" />
|
||
<span className='text-2xl font-semibold'>{review.rating}</span>
|
||
</div>
|
||
<span className='text-sm text-gray-500'>از ۵</span>
|
||
</div>
|
||
|
||
<div>
|
||
<div className='flex items-center gap-2 mb-4'>
|
||
<DocumentText size={20} color="#8C90A3" />
|
||
<span className='text-sm font-medium'>نظر</span>
|
||
</div>
|
||
<div className='bg-gray-50 rounded-xl p-4 border border-border'>
|
||
<p className='text-sm leading-6 text-gray-700 whitespace-pre-wrap'>
|
||
{review.comment || 'نظری ثبت نشده است'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{review.positivePoints && review.positivePoints.length > 0 && (
|
||
<div>
|
||
<div className='flex items-center gap-2 mb-4'>
|
||
<Like1 size={20} color="#22C55E" />
|
||
<span className='text-sm font-medium'>نقاط مثبت</span>
|
||
</div>
|
||
<div className='flex flex-wrap gap-3'>
|
||
{review.positivePoints.map((point, index) => (
|
||
<span
|
||
key={index}
|
||
className='px-4 py-2 border border-green-500 text-green-600 rounded-xl text-sm bg-white'
|
||
>
|
||
{t(`reviews.${point}`)}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{review.negativePoints && review.negativePoints.length > 0 && (
|
||
<div>
|
||
<div className='flex items-center gap-2 mb-4'>
|
||
<Dislike size={20} color="#EF4444" />
|
||
<span className='text-sm font-medium'>نقاط منفی</span>
|
||
</div>
|
||
<div className='flex flex-wrap gap-3'>
|
||
{review.negativePoints.map((point, index) => (
|
||
<span
|
||
key={index}
|
||
className='px-4 py-2 border border-red-500 text-red-600 rounded-xl text-sm bg-white'
|
||
>
|
||
{t(`reviews.${point}`)}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default ReviewContentSection
|