57 lines
2.8 KiB
TypeScript
57 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import type { CompetitorCandidate } from '../types';
|
|
import EvidencePopover from './EvidencePopover';
|
|
import { EditableCard } from './EditableCard';
|
|
|
|
interface Step3CompetitorsProps {
|
|
candidates: CompetitorCandidate[];
|
|
onCandidatesChange: (candidates: CompetitorCandidate[]) => void;
|
|
maxCompetitors: number;
|
|
t: any;
|
|
}
|
|
|
|
const Step3Competitors: React.FC<Step3CompetitorsProps> = ({ candidates, onCandidatesChange, maxCompetitors, t }) => {
|
|
const sortedCandidates = [...candidates].sort((a, b) => b.confidence - a.confidence);
|
|
|
|
return (
|
|
<div>
|
|
<h2 className="text-2xl font-bold mb-4">{t.title}</h2>
|
|
<p className="text-light-subtle dark:text-brand-light mb-6">
|
|
{t.subtitle(maxCompetitors)}
|
|
</p>
|
|
|
|
<EditableCard<CompetitorCandidate>
|
|
title={t.cardTitle}
|
|
items={sortedCandidates}
|
|
onItemsChange={onCandidatesChange}
|
|
fieldConfigs={[
|
|
{ key: 'name', label: t.nameLabel, type: 'text' },
|
|
{ key: 'url', label: 'URL', type: 'text' },
|
|
{ key: 'why', label: t.whyLabel, type: 'textarea' },
|
|
]}
|
|
newItemTemplate={{ name: '', url: '', confidence: 0.8, why: '', evidence: [] }}
|
|
renderDisplay={(item, index) => (
|
|
<div>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center">
|
|
<strong className={`text-light-text dark:text-white ${index < maxCompetitors ? 'text-green-600 dark:text-green-400' : ''}`}>{item.name}</strong>
|
|
<a href={item.url} target="_blank" rel="noopener noreferrer" className="ml-2 text-blue-500 dark:text-blue-400 hover:underline text-sm">
|
|
{t.visitButton}
|
|
</a>
|
|
<EvidencePopover evidence={item.evidence} />
|
|
</div>
|
|
<span className="text-xs font-mono bg-light-accent dark:bg-brand-accent text-light-text dark:text-white py-1 px-2 rounded-full">
|
|
{(item.confidence * 100).toFixed(0)}%
|
|
</span>
|
|
</div>
|
|
<p className="text-light-subtle dark:text-brand-light text-sm mt-1">{item.why}</p>
|
|
{index === maxCompetitors - 1 && <div className="border-t-2 border-dashed border-red-500 mt-4 pt-2 text-red-500 dark:text-red-400 text-xs text-center font-bold">{t.shortlistBoundary}</div>}
|
|
</div>
|
|
)}
|
|
t={t.editableCard}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Step3Competitors; |