TNT-Flo/sandbox-web-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add sonner + project creation working

Browse Source
This commit is contained in:
Ishaan Dey
2024-04-27 16:22:35 -04:00
parent 676f88a7ce
commit d941e2c056
18 changed files with 427 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/components/dashboard/newProject.tsx
View File

@ -10,7 +10,7 @@ import {
} from "@/components/ui/dialog"
import Image from "next/image"
import { useState } from "react"
import { z } from "zod"
import { set, z } from "zod"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
@ -32,6 +32,10 @@ import {
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"
type TOptions = "react" | "node"
@ -68,6 +72,10 @@ export default function NewProjectModal({
setOpen: (open: boolean) => void
}) {
const [selected, setSelected] = useState<TOptions>("react")
const [loading, setLoading] = useState(false)
const router = useRouter()
const user = useUser()
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
@ -77,8 +85,14 @@ export default function NewProjectModal({
},
})
function onSubmit(values: z.infer<typeof formSchema>) {
const sandboxData = { type: selected, ...values }
async function onSubmit(values: z.infer<typeof formSchema>) {
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 (
@ -146,8 +160,14 @@ export default function NewProjectModal({
</FormItem>
)}
/>
<CustomButton type="submit" className="w-full">
Submit
<CustomButton disabled={loading} type="submit" className="w-full">
{loading ? (
<>
<Loader2 className="animate-spin mr-2 h-4 w-4" /> Loading...
</>
) : (
"Submit"
)}
</CustomButton>
</form>
</Form>

2
frontend/components/dashboard/projectCard/dropdown.tsx
View File

@ -20,7 +20,7 @@ export default function ProjectCardDropdown({ sandbox }: { sandbox: Sandbox }) {
e.preventDefault()
e.stopPropagation()
}}
className="h-6 w-6 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm"
className="h-6 w-6 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm outline-foreground"
>
<Ellipsis className="w-4 h-4" />
</DropdownMenuTrigger>

80
frontend/components/dashboard/projects.tsx
View File

@ -2,7 +2,9 @@ import { Sandbox } from "@/lib/types"
import ProjectCard from "./projectCard"
import Image from "next/image"
import ProjectCardDropdown from "./projectCard/dropdown"
import { Clock, Globe } from "lucide-react"
import { Clock, Globe, Lock } from "lucide-react"
import Link from "next/link"
import { Card } from "../ui/card"
export default function DashboardProjects({
sandboxes,
@ -12,35 +14,53 @@ export default function DashboardProjects({
return (
<div className="grow p-4 flex flex-col">
<div className="text-xl font-medium mb-8">My Projects</div>
<div className="grow w-full grid lg:grid-cols-3 2xl:grid-cols-4 md:grid-cols-2 gap-4">
{sandboxes.map((sandbox) => (
<ProjectCard key={sandbox.id} id={sandbox.id}>
<div className="space-x-2 flex items-center justify-start w-full">
<Image
alt=""
src={
sandbox.type === "react"
? "/project-icons/react.svg"
: "/project-icons/node.svg"
}
width={20}
height={20}
/>
<div className="font-medium static whitespace-nowrap w-full text-ellipsis overflow-hidden">
{sandbox.name}
</div>
<ProjectCardDropdown sandbox={sandbox} />
</div>
<div className="flex flex-col text-muted-foreground space-y-0.5 text-sm">
<div className="flex items-center">
<Globe className="w-3 h-3 mr-2" /> Public
</div>
<div className="flex items-center">
<Clock className="w-3 h-3 mr-2" /> 3d ago
</div>
</div>
</ProjectCard>
))}
<div className="grow w-full ">
<div className="w-full grid lg:grid-cols-3 2xl:grid-cols-4 md:grid-cols-2 gap-4">
{sandboxes.map((sandbox) => (
<Link
key={sandbox.id}
href={`/code/${sandbox.id}`}
className="cursor-pointer transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring rounded-lg"
>
<Card className="p-4 h-48 flex flex-col justify-between items-start hover:border-foreground transition-all">
{/* <ProjectCard key={sandbox.id} id={sandbox.id}> */}
<div className="space-x-2 flex items-center justify-start w-full">
<Image
alt=""
src={
sandbox.type === "react"
? "/project-icons/react.svg"
: "/project-icons/node.svg"
}
width={20}
height={20}
/>
<div className="font-medium static whitespace-nowrap w-full text-ellipsis overflow-hidden">
{sandbox.name}
</div>
<ProjectCardDropdown sandbox={sandbox} />
</div>
<div className="flex flex-col text-muted-foreground space-y-0.5 text-sm">
<div className="flex items-center">
{sandbox.visibility === "private" ? (
<>
<Lock className="w-3 h-3 mr-2" /> Private
</>
) : (
<>
<Globe className="w-3 h-3 mr-2" /> Public
</>
)}
</div>
<div className="flex items-center">
<Clock className="w-3 h-3 mr-2" /> 3d ago
</div>
</div>
{/* </ProjectCard> */}
</Card>
</Link>
))}
</div>
</div>
</div>
)