Module Update

src/modules/textbooks/components/create-chapter-dialog.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import { useState } from "react"
+import { Plus } from "lucide-react"
+import { useFormStatus } from "react-dom"
+import { Button } from "@/shared/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/shared/components/ui/dialog"
+import { Input } from "@/shared/components/ui/input"
+import { Label } from "@/shared/components/ui/label"
+import { createChapterAction } from "../actions"
+import { toast } from "sonner"
+
+function SubmitButton() {
+  const { pending } = useFormStatus()
+  return (
+    <Button type="submit" disabled={pending}>
+      {pending ? "Creating..." : "Create Chapter"}
+    </Button>
+  )
+}
+
+interface CreateChapterDialogProps {
+  textbookId: string
+  parentId?: string
+  trigger?: React.ReactNode
+}
+
+export function CreateChapterDialog({ textbookId, parentId, trigger }: CreateChapterDialogProps) {
+  const [open, setOpen] = useState(false)
+
+  const handleSubmit = async (formData: FormData) => {
+    const result = await createChapterAction(textbookId, parentId, null, formData)
+    if (result.success) {
+      toast.success(result.message)
+      setOpen(false)
+    } else {
+      toast.error(result.message)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {trigger || (
+          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+            <Plus className="h-4 w-4" />
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Add New Chapter</DialogTitle>
+          <DialogDescription>
+            Create a new chapter or section.
+          </DialogDescription>
+        </DialogHeader>
+        <form action={handleSubmit}>
+          <div className="grid gap-4 py-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="title" className="text-right">
+                Title
+              </Label>
+              <Input
+                id="title"
+                name="title"
+                placeholder="e.g. Chapter 1: Introduction"
+                className="col-span-3"
+                required
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <SubmitButton />
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}