48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
import { MdDelete, MdAdd } from "react-icons/md";
|
|
|
|
interface AlternativeSolutionProps {
|
|
solutions: string[];
|
|
onAdd: () => void;
|
|
onRemove: (index: number) => void;
|
|
onEdit: (index: number, value: string) => void;
|
|
}
|
|
|
|
const AlternativeSolutions: React.FC<AlternativeSolutionProps> = ({
|
|
solutions,
|
|
onAdd,
|
|
onRemove,
|
|
onEdit,
|
|
}) => {
|
|
return (
|
|
<div className="space-y-2 mt-4">
|
|
{solutions.map((solution, index) => (
|
|
<div key={index} className="flex items-center gap-2">
|
|
<input
|
|
type="text"
|
|
value={solution}
|
|
onChange={(e) => onEdit(index, e.target.value)}
|
|
className="flex-1 p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
|
placeholder={`Solution ${index + 1}`}
|
|
/>
|
|
<button
|
|
onClick={() => onRemove(index)}
|
|
className="p-2 text-gray-500 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
|
|
title="Delete solution"
|
|
>
|
|
<MdDelete size={20} />
|
|
</button>
|
|
</div>
|
|
))}
|
|
<button
|
|
onClick={onAdd}
|
|
className="w-full mt-2 p-2 border-2 border-dashed border-gray-300 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition-colors flex items-center justify-center gap-2 text-gray-600 hover:text-blue-600"
|
|
>
|
|
<MdAdd size={18} />
|
|
Add Alternative Solution
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AlternativeSolutions;
|