46 lines
1.9 KiB
JavaScript
46 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import { useTranslation } from '../../i18n/LanguageContext';
|
|
|
|
const scoreToPercent = (score) => Math.round(Math.max(0, Math.min(1.5, score)) * 100);
|
|
|
|
export default function WeaknessPriorityList({ weaknesses = [] }) {
|
|
const t = useTranslation();
|
|
|
|
if (!weaknesses.length) {
|
|
return (
|
|
<div className="rounded-2xl border border-dashed border-gray-300 dark:border-gray-700 bg-white/70 dark:bg-gray-900/70 p-4 text-sm text-gray-600 dark:text-gray-300">
|
|
{t('weakness.no_data')}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-2xl border border-rose-200 dark:border-rose-900 bg-white dark:bg-gray-900 p-5 shadow-sm">
|
|
<h3 className="text-lg font-semibold text-rose-700 dark:text-rose-300 mb-4">{t('weakness.title')}</h3>
|
|
|
|
<div className="space-y-3">
|
|
{weaknesses.map((item, index) => (
|
|
<div
|
|
key={item.name}
|
|
className="rounded-xl border border-rose-100 dark:border-rose-900/60 bg-rose-50/60 dark:bg-rose-950/20 p-3"
|
|
>
|
|
<div className="flex items-center justify-between gap-3">
|
|
<p className="font-semibold text-gray-900 dark:text-gray-100">
|
|
{index + 1}. {item.name}
|
|
</p>
|
|
<span className="text-xs px-2 py-1 rounded-full bg-rose-200/70 dark:bg-rose-800/60 text-rose-800 dark:text-rose-200 font-semibold">
|
|
{scoreToPercent(item.priorityScore)}
|
|
</span>
|
|
</div>
|
|
<div className="mt-2 grid grid-cols-3 gap-2 text-xs text-gray-600 dark:text-gray-300">
|
|
<p>{t('weakness.gap', { score: item.gapScore.toFixed(2) })}</p>
|
|
<p>{t('weakness.consistency', { score: item.consistencyScore.toFixed(2) })}</p>
|
|
<p>{t('weakness.trend', { score: item.trendDelta.toFixed(2) })}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|