Spaces:
Sleeping
Sleeping
File size: 2,547 Bytes
9b2dc95 a34cccb | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | import { useState } from 'react';
interface AddRepoModalProps {
isOpen: boolean;
onClose: () => void;
onSubmit: (namespace: string, repo: string) => void;
}
export function AddRepoModal({ isOpen, onClose, onSubmit }: AddRepoModalProps) {
const [namespace, setNamespace] = useState('');
const [repo, setRepo] = useState('');
const [loading, setLoading] = useState(false);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!namespace || !repo) return;
setLoading(true);
await onSubmit(namespace, repo);
setLoading(false);
setNamespace('');
setRepo('');
onClose();
};
if (!isOpen) return null;
return (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div className="bg-gray-800 rounded-lg p-6 w-full max-w-md border border-gray-700">
<h2 className="text-xl font-bold text-white mb-4">Add Repository</h2>
<form onSubmit={handleSubmit}>
<div className="mb-4">
<label className="block text-gray-400 text-sm mb-2">Namespace</label>
<input
type="text"
value={namespace}
onChange={(e) => setNamespace(e.target.value)}
className="w-full bg-gray-700 text-white rounded-lg px-4 py-2 border border-gray-600 focus:border-blue-500 focus:outline-none"
placeholder="e.g., smol-users"
/>
</div>
<div className="mb-4">
<label className="block text-gray-400 text-sm mb-2">Repository</label>
<input
type="text"
value={repo}
onChange={(e) => setRepo(e.target.value)}
className="w-full bg-gray-700 text-white rounded-lg px-4 py-2 border border-gray-600 focus:border-blue-500 focus:outline-none"
placeholder="e.g., whisper-small"
/>
</div>
<div className="flex gap-2 justify-end">
<button
type="button"
onClick={onClose}
className="px-4 py-2 text-gray-400 hover:text-white transition"
>
Cancel
</button>
<button
type="submit"
disabled={loading || !namespace || !repo}
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition disabled:opacity-50"
>
{loading ? 'Adding...' : 'Add'}
</button>
</div>
</form>
</div>
</div>
);
} |