comments

src/components/utils/Comment.tsx

@@ -2,6 +2,7 @@
 
 import { Star1 } from 'iconsax-react'
 import React from 'react'
+import { useTranslation } from 'react-i18next';
 
 type Props = {
     user: string;
@@ -9,10 +10,19 @@ type Props = {
     date: string;
     text: string;
     tags: Array<string>;
+    positivePoints?: string[];
+    negativePoints?: string[];
     className?: string;
 }
 
-function Comment({ user, rating, date, text, tags, className = '' }: Props) {
+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">
@@ -29,13 +39,30 @@ function Comment({ user, rating, date, text, tags, className = '' }: Props) {
                 {text}
             </p>
 
-            <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>
+            {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>
     )
 }