56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
|
import { useState } from 'react';
|
||
|
|
|
||
|
|
interface CreateChecklistModalProps {
|
||
|
|
onSave: (name: string) => Promise<boolean>;
|
||
|
|
onClose: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function CreateChecklistModal({ onSave, onClose }: CreateChecklistModalProps) {
|
||
|
|
const [name, setName] = useState('');
|
||
|
|
|
||
|
|
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">Add Checklist</h3>
|
||
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||
|
|
<div>
|
||
|
|
<label className="block text-gray-300 text-sm font-medium mb-2">Title</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="Checklist title..."
|
||
|
|
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"
|
||
|
|
>
|
||
|
|
Add
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|