123 lines
5.0 KiB
TypeScript
123 lines
5.0 KiB
TypeScript
|
|
import React, { useState } from 'react';
|
|
import { Trash2, Plus, CheckCircle2, ExternalLink, FileText } from 'lucide-react';
|
|
import { Competitor } from '../types';
|
|
|
|
interface StepReviewProps {
|
|
competitors: Competitor[];
|
|
onRemove: (id: string) => void;
|
|
onAdd: (name: string) => void;
|
|
onConfirm: () => void;
|
|
hasResults?: boolean;
|
|
onShowReport?: () => void;
|
|
}
|
|
|
|
export const StepReview: React.FC<StepReviewProps> = ({ competitors, onRemove, onAdd, onConfirm, hasResults, onShowReport }) => {
|
|
const [newCompany, setNewCompany] = useState('');
|
|
|
|
const handleAdd = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (newCompany.trim()) {
|
|
onAdd(newCompany.trim());
|
|
setNewCompany('');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto mt-8 px-4 pb-24">
|
|
<div className="flex items-end justify-between mb-6">
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-slate-900">Confirm Target List</h2>
|
|
<p className="text-slate-600 mt-1">Review the identified companies before starting the deep tech audit.</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<span className="bg-indigo-50 text-indigo-700 font-bold py-1 px-3 rounded-full text-sm">
|
|
{competitors.length} Companies
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
|
|
<ul className="divide-y divide-slate-100">
|
|
{competitors.map((comp) => (
|
|
<li key={comp.id} className="flex items-start justify-between p-4 hover:bg-slate-50 transition-colors group">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-bold text-slate-800 text-lg">{comp.name}</span>
|
|
{comp.url && (
|
|
<a
|
|
href={comp.url}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-indigo-500 hover:text-indigo-700 p-1 rounded hover:bg-indigo-50"
|
|
title={comp.url}
|
|
>
|
|
<ExternalLink size={14} />
|
|
</a>
|
|
)}
|
|
</div>
|
|
{comp.description && (
|
|
<p className="text-sm text-slate-500 mt-1 pr-8">{comp.description}</p>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => onRemove(comp.id)}
|
|
className="text-slate-400 hover:text-red-500 p-2 rounded-full hover:bg-red-50 transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100 self-center"
|
|
aria-label="Remove"
|
|
>
|
|
<Trash2 size={18} />
|
|
</button>
|
|
</li>
|
|
))}
|
|
{competitors.length === 0 && (
|
|
<li className="p-8 text-center text-slate-500 italic">
|
|
No companies in list. Add some manually below.
|
|
</li>
|
|
)}
|
|
</ul>
|
|
|
|
<div className="bg-slate-50 p-4 border-t border-slate-200">
|
|
<form onSubmit={handleAdd} className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
value={newCompany}
|
|
onChange={(e) => setNewCompany(e.target.value)}
|
|
placeholder="Add another company manually..."
|
|
className="flex-1 px-4 py-2 rounded-lg border border-slate-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 outline-none"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={!newCompany.trim()}
|
|
className="bg-white border border-slate-300 text-slate-700 hover:bg-slate-100 font-medium px-4 py-2 rounded-lg flex items-center gap-2 disabled:opacity-50"
|
|
>
|
|
<Plus size={18} /> Add
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sticky Footer CTA */}
|
|
<div className="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-md border-t border-slate-200 p-4 z-40">
|
|
<div className="max-w-4xl mx-auto flex justify-end gap-3">
|
|
{hasResults && onShowReport && (
|
|
<button
|
|
onClick={onShowReport}
|
|
className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 font-bold py-3 px-6 rounded-xl shadow-sm transition-all flex items-center gap-2"
|
|
>
|
|
<FileText size={20} /> View Report
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={onConfirm}
|
|
disabled={competitors.length === 0}
|
|
className="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3 px-8 rounded-xl shadow-lg shadow-emerald-600/20 transition-all transform active:scale-[0.98] flex items-center gap-2"
|
|
>
|
|
<CheckCircle2 size={20} /> {hasResults ? "Restart Analysis" : "Confirm & Run Audit"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|