"use client"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import Image from "next/image"; import { useState } from "react"; import { set, z } from "zod"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form"; import { Input } from "@/components/ui/input"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { useUser } from "@clerk/nextjs"; import { createSandbox } from "@/lib/actions"; import { useRouter } from "next/navigation"; import { Loader2 } from "lucide-react"; import { Button } from "../ui/button"; type TOptions = "react" | "node" | "python" | "more"; const data: { id: TOptions; name: string; icon: string; description: string; disabled: boolean; }[] = [ { id: "react", name: "React", icon: "/project-icons/react.svg", description: "A JavaScript library for building user interfaces", disabled: false, }, { id: "node", name: "Node", icon: "/project-icons/node.svg", description: "A JavaScript runtime built on the V8 JavaScript engine", disabled: false, }, { id: "python", name: "Python", icon: "/project-icons/python.svg", description: "A high-level, general-purpose language, coming soon", disabled: true, }, { id: "more", name: "More Languages", icon: "/project-icons/more.svg", description: "More coming soon, feel free to contribute on GitHub", disabled: true, }, ]; const formSchema = z.object({ name: z .string() .min(1) .max(16) .refine( (value) => /^[a-zA-Z0-9_]+$/.test(value), "Name must be alphanumeric and can contain underscores" ), visibility: z.enum(["public", "private"]), }); export default function NewProjectModal({ open, setOpen, }: { open: boolean; setOpen: (open: boolean) => void; }) { const [selected, setSelected] = useState("react"); const [loading, setLoading] = useState(false); const router = useRouter(); const user = useUser(); const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { name: "", visibility: "public", }, }); async function onSubmit(values: z.infer) { if (!user.isSignedIn) return; const sandboxData = { type: selected, userId: user.user.id, ...values }; setLoading(true); const id = await createSandbox(sandboxData); router.push(`/code/${id}`); } return ( { if (!loading) setOpen(open); }} > Create A Sandbox
{data.map((item) => ( ))}
( Name )} /> ( Visibility )} />
); }