Spaces:
Sleeping
Sleeping
File size: 3,583 Bytes
d53c2af | 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 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
"use client";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Plus, Rocket } from "lucide-react";
const formSchema = z.object({
namespace: z.string().min(1, "Namespace is required"),
repo: z.string().min(1, "Repository name is required"),
});
interface AddRepoDialogProps {
onAdd: (namespace: string, repo: string) => Promise<void>;
}
export function AddRepoDialog({ onAdd }: AddRepoDialogProps) {
const [open, setOpen] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
namespace: "",
repo: "",
},
});
async function onSubmit(values: z.infer<typeof formSchema>) {
setIsSubmitting(true);
try {
await onAdd(values.namespace, values.repo);
setOpen(false);
form.reset();
} finally {
setIsSubmitting(false);
}
}
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button className="bg-accent text-accent-foreground hover:bg-accent/90">
<Plus className="mr-2 h-4 w-4" />
Add Space
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-accent/10 text-accent">
<Rocket className="h-6 w-6" />
</div>
<DialogTitle>Monitor New Space</DialogTitle>
<DialogDescription>
Enter the Hugging Face Space repository details (e.g., username/space-name).
</DialogDescription>
</DialogHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 pt-4">
<FormField
control={form.control}
name="namespace"
render={({ field }) => (
<FormItem>
<FormLabel>Namespace / Username</FormLabel>
<FormControl>
<Input placeholder="e.g. google" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="repo"
render={({ field }) => (
<FormItem>
<FormLabel>Space Name</FormLabel>
<FormControl>
<Input placeholder="e.g. gemma-2b" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<DialogFooter className="pt-4">
<Button type="button" variant="outline" onClick={() => setOpen(false)}>
Cancel
</Button>
<Button type="submit" disabled={isSubmitting}>
{isSubmitting ? "Connecting..." : "Start Probing"}
</Button>
</DialogFooter>
</form>
</Form>
</DialogContent>
</Dialog>
);
}
|