60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
|
|
interface EditCheckItemModalProps {
|
|
itemName: string;
|
|
onSave: (name: string) => Promise<boolean>;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function EditCheckItemModal({ itemName, onSave, onClose }: EditCheckItemModalProps) {
|
|
const [name, setName] = useState(itemName);
|
|
|
|
useEffect(() => {
|
|
setName(itemName);
|
|
}, [itemName]);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!name.trim()) return;
|
|
|
|
const success = await onSave(name);
|
|
if (success) {
|
|
onClose();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="bg-gray-800 rounded-lg p-6 max-w-md w-full">
|
|
<h3 className="text-xl font-bold text-white mb-4">Edit Item</h3>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label className="block text-gray-300 text-sm font-medium mb-2">Item Name</label>
|
|
<input
|
|
type="text"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
className="w-full bg-gray-700 text-white rounded-lg p-3 border border-gray-600 focus:border-blue-500 focus:outline-none"
|
|
placeholder="Item name..."
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2 pt-2">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="flex-1 bg-gray-700 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={!name.trim()}
|
|
className="flex-1 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white font-medium py-2 px-4 rounded-lg transition-colors"
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|