39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import { useState } from 'react';
|
|
import { Plus } from 'lucide-react';
|
|
|
|
interface AddOptionProps {
|
|
onAdd: (text: string) => void;
|
|
}
|
|
|
|
export function AddOption({ onAdd }: AddOptionProps) {
|
|
const [text, setText] = useState('');
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (text.trim()) {
|
|
onAdd(text);
|
|
setText('');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
value={text}
|
|
onChange={(e) => setText(e.target.value)}
|
|
placeholder="Add a new option..."
|
|
className="flex-1 px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white/30"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={!text.trim()}
|
|
className="px-6 py-3 bg-white text-purple-600 rounded-lg font-semibold hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center gap-2"
|
|
>
|
|
<Plus className="w-5 h-5" />
|
|
Add
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|