Spaces:
Running
Running
File size: 3,176 Bytes
f871fed |
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 |
'use client'
import { useEffect } from 'react'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'
import { useCreateNotebook } from '@/lib/hooks/use-notebooks'
const createNotebookSchema = z.object({
name: z.string().min(1, 'Name is required'),
description: z.string().optional(),
})
type CreateNotebookFormData = z.infer<typeof createNotebookSchema>
interface CreateNotebookDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
}
export function CreateNotebookDialog({ open, onOpenChange }: CreateNotebookDialogProps) {
const createNotebook = useCreateNotebook()
const {
register,
handleSubmit,
formState: { errors, isValid },
reset,
} = useForm<CreateNotebookFormData>({
resolver: zodResolver(createNotebookSchema),
mode: 'onChange',
defaultValues: {
name: '',
description: '',
},
})
const closeDialog = () => onOpenChange(false)
const onSubmit = async (data: CreateNotebookFormData) => {
await createNotebook.mutateAsync(data)
closeDialog()
reset()
}
useEffect(() => {
if (!open) {
reset()
}
}, [open, reset])
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[480px]">
<DialogHeader>
<DialogTitle>Create New Notebook</DialogTitle>
<DialogDescription>
Start organizing your research with a dedicated space for related sources and notes.
</DialogDescription>
</DialogHeader>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
<div className="space-y-2">
<Label htmlFor="notebook-name">Name *</Label>
<Input
id="notebook-name"
{...register('name')}
placeholder="Enter notebook name"
autoFocus
/>
{errors.name && (
<p className="text-sm text-destructive">{errors.name.message}</p>
)}
</div>
<div className="space-y-2">
<Label htmlFor="notebook-description">Description</Label>
<Textarea
id="notebook-description"
{...register('description')}
placeholder="Describe the purpose and scope of this notebook..."
rows={4}
/>
</div>
<DialogFooter className="gap-2 sm:gap-0">
<Button type="button" variant="outline" onClick={closeDialog}>
Cancel
</Button>
<Button type="submit" disabled={!isValid || createNotebook.isPending}>
{createNotebook.isPending ? 'Creating…' : 'Create Notebook'}
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
)
}
|