add edit + share modals
This commit is contained in:
Ishaan Dey
130
frontend/components/editor/navbar/edit.tsx
Normal file
130
frontend/components/editor/navbar/edit.tsx
Normal file
@ -0,0 +1,130 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog"
|
||||
import { 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 { Loader2 } from "lucide-react"
|
||||
import { useState } from "react"
|
||||
import { Sandbox } from "@/lib/types"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
const formSchema = z.object({
|
||||
name: z.string().min(1).max(16),
|
||||
visibility: z.enum(["public", "private"]),
|
||||
})
|
||||
|
||||
export default function EditSandboxModal({
|
||||
open,
|
||||
setOpen,
|
||||
data,
|
||||
}: {
|
||||
open: boolean
|
||||
setOpen: (open: boolean) => void
|
||||
data: Sandbox
|
||||
}) {
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
name: data.name,
|
||||
visibility: data.visibility,
|
||||
},
|
||||
})
|
||||
|
||||
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)
|
||||
|
||||
console.log(values)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit Sandbox Info</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem className="mb-4">
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="My Project" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="visibility"
|
||||
render={({ field }) => (
|
||||
<FormItem className="mb-8">
|
||||
<FormLabel>Visibility</FormLabel>
|
||||
<Select
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="public">Public</SelectItem>
|
||||
<SelectItem value="private">Private</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button disabled={loading} type="submit" className="w-full">
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="animate-spin mr-2 h-4 w-4" /> Loading...
|
||||
</>
|
||||
) : (
|
||||
"Submit"
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@ -1,9 +1,15 @@
|
||||
"use client"
|
||||
|
||||
import Image from "next/image"
|
||||
import Logo from "@/assets/logo.svg"
|
||||
import { Pencil } from "lucide-react"
|
||||
import { Pencil, Users } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import { Sandbox, User } from "@/lib/types"
|
||||
import UserButton from "@/components/ui/userButton"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { useState } from "react"
|
||||
import EditSandboxModal from "./edit"
|
||||
import ShareSandboxModal from "./share"
|
||||
|
||||
export default function Navbar({
|
||||
userData,
|
||||
@ -12,23 +18,47 @@ export default function Navbar({
|
||||
userData: User
|
||||
sandboxData: Sandbox
|
||||
}) {
|
||||
const [isEditOpen, setIsEditOpen] = useState(false)
|
||||
const [isShareOpen, setIsShareOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="h-14 px-2 w-full flex items-center justify-between border-b border-border">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm"
|
||||
>
|
||||
<Image src={Logo} alt="Logo" width={36} height={36} />
|
||||
</Link>
|
||||
<div className="text-sm font-medium flex items-center">
|
||||
{sandboxData.name}
|
||||
<div className="h-7 w-7 ml-2 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-md">
|
||||
<Pencil className="w-4 h-4" />
|
||||
<>
|
||||
<EditSandboxModal
|
||||
open={isEditOpen}
|
||||
setOpen={setIsEditOpen}
|
||||
data={sandboxData}
|
||||
/>
|
||||
<ShareSandboxModal
|
||||
open={isShareOpen}
|
||||
setOpen={setIsShareOpen}
|
||||
data={sandboxData}
|
||||
/>
|
||||
<div className="h-14 px-2 w-full flex items-center justify-between border-b border-border">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="ring-offset-2 transition-all ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-md"
|
||||
>
|
||||
<Image src={Logo} alt="Logo" width={36} height={36} />
|
||||
</Link>
|
||||
<div className="text-sm font-medium flex items-center">
|
||||
{sandboxData.name}
|
||||
<button
|
||||
onClick={() => setIsEditOpen(true)}
|
||||
className="h-7 w-7 ml-2 flex items-center justify-center bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-md ring-offset-2 transition-all ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
>
|
||||
<Pencil className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button variant="outline" onClick={() => setIsShareOpen(true)}>
|
||||
<Users className="w-4 h-4 mr-2" />
|
||||
Share
|
||||
</Button>
|
||||
<UserButton userData={userData} />
|
||||
</div>
|
||||
</div>
|
||||
<UserButton userData={userData} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
127
frontend/components/editor/navbar/share.tsx
Normal file
127
frontend/components/editor/navbar/share.tsx
Normal file
@ -0,0 +1,127 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog"
|
||||
import { 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 { Loader2, UserPlus, X } from "lucide-react"
|
||||
import { useState } from "react"
|
||||
import { Sandbox } from "@/lib/types"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
const formSchema = z.object({
|
||||
email: z.string().email(),
|
||||
})
|
||||
|
||||
export default function ShareSandboxModal({
|
||||
open,
|
||||
setOpen,
|
||||
data,
|
||||
}: {
|
||||
open: boolean
|
||||
setOpen: (open: boolean) => void
|
||||
data: Sandbox
|
||||
}) {
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
email: "",
|
||||
},
|
||||
})
|
||||
|
||||
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)
|
||||
|
||||
console.log(values)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="p-0">
|
||||
<div className="p-6 pb-3 space-y-6">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Share Sandbox</DialogTitle>
|
||||
</DialogHeader>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="flex">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem className="mr-4 w-full">
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="yourfriend@domain.com"
|
||||
{...field}
|
||||
className="w-full"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button disabled={loading} type="submit" className="">
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="animate-spin mr-2 h-4 w-4" /> Loading...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<UserPlus className="mr-2 h-4 w-4" /> Share
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
<div className="w-full h-[1px] bg-border" />
|
||||
<div className="p-6 pt-3">
|
||||
<DialogHeader className="mb-6">
|
||||
<DialogTitle>Share Sandbox</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<div className="h-5 w-5 bg-red-500 rounded-full mr-2" />
|
||||
Ishaan Dey
|
||||
</div>
|
||||
<Button variant="ghost" size="smIcon">
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user