hamid zarghami
70 lines
2.8 KiB
TypeScript
70 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { Star1 } from 'iconsax-react'
|
|
import React from 'react'
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
type Props = {
|
|
user: string;
|
|
rating: number;
|
|
date: string;
|
|
text: string;
|
|
tags: Array<string>;
|
|
positivePoints?: string[];
|
|
negativePoints?: string[];
|
|
className?: string;
|
|
}
|
|
|
|
function Comment({ user, rating, date, text, tags, positivePoints = [], negativePoints = [], className = '' }: Props) {
|
|
const { t } = useTranslation("rating");
|
|
|
|
const getTranslationKey = (point: string, isPositive: boolean): string => {
|
|
const basePath = isPositive ? 'Tabs.Strengths.Options' : 'Tabs.Weeknesses.Options';
|
|
return `${basePath}.${point}`;
|
|
};
|
|
|
|
return (
|
|
<div className={className}>
|
|
<div className="flex items-center justify-start">
|
|
<span className="rounded-sm bg-primary dark:bg-foreground h-5 mb-1 w-13 flex items-center justify-center gap-1">
|
|
<Star1 className='fill-white dark:fill-primary mb-0.5' size={12} />
|
|
<span className='text-sm2 font-medium text-white dark:text-primary mt-1'>{rating}</span>
|
|
</span>
|
|
<span className='ms-2 text-sm2'>{user}</span>
|
|
<span className='ms-3 mb-1 size-1.5 bg-border rounded-full'></span>
|
|
<span className='ms-3 text-sm2'>{date}</span>
|
|
</div>
|
|
|
|
<p className='text-xs mt-3'>
|
|
{text}
|
|
</p>
|
|
|
|
{tags.length > 0 && (
|
|
<ul className='mt-3 flex flex-wrap items-center justify-start gap-2'>
|
|
{tags.map((v, i) => (
|
|
<li key={i} className='text-xs py-1.5 px-3 bg-[#F2F2F2] dark:bg-neutral-700 dark:text-disabled-text rounded-sm text-center'>
|
|
{v}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
|
|
{(positivePoints.length > 0 || negativePoints.length > 0) && (
|
|
<ul className='mt-5 flex flex-wrap items-center justify-start gap-2'>
|
|
{positivePoints.map((point, i) => (
|
|
<li key={`positive-${i}`} className='text-xs py-1.5 px-3 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-sm text-center'>
|
|
{t(getTranslationKey(point, true))}
|
|
</li>
|
|
))}
|
|
{negativePoints.map((point, i) => (
|
|
<li key={`negative-${i}`} className='text-xs py-1.5 px-3 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded-sm text-center'>
|
|
{t(getTranslationKey(point, false))}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Comment |