feat: add elements

front/components/modals/CourseEdit/NewChapter.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import Modal from "../Modal";
+
+function NewChapterModal({ submitChapter , closeModal }: any) {
+  const [chapterName, setChapterName] = useState("");
+  const [chapterDescription, setChapterDescription] = useState("");
+
+  const handleChapterNameChange = (e: any) => {
+    setChapterName(e.target.value);
+  };
+
+  const handleChapterDescriptionChange = (e: any) => {
+    setChapterDescription(e.target.value);
+  };
+
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
+    console.log({ chapterName, chapterDescription });
+    submitChapter({ name : chapterName, description : chapterDescription , elements : [] });
+  };
+
+  return (
+    <Modal>
+      <h1>Add New Chapter <button onClick={closeModal}>X</button></h1>
+      <input type="text" onChange={handleChapterNameChange} placeholder="Chapter Name" /> <br />
+      <input type="text" onChange={handleChapterDescriptionChange} placeholder="Chapter Description" />
+      <br />
+      <button onClick={handleSubmit}>Add Chapter</button>
+    </Modal>
+  );
+}
+
+export default NewChapterModal;

front/components/modals/CourseEdit/NewElement.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import Modal from "../Modal";
+
+function NewElementModal({ closeModal, submitElement, chapterId }: any) {
+  const [elementName, setElementName] = useState("");
+  const [elementDescription, setElementDescription] = useState("");
+
+  const handleElementNameChange = (e: any) => {
+    setElementName(e.target.value);
+  };
+
+  const handleElementDescriptionChange = (e: any) => {
+    setElementDescription(e.target.value);
+  };
+
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
+    console.log({ elementName, elementDescription, chapterId });
+    submitElement({
+      name: elementName,
+      chapterId: chapterId,
+      type: "dynamic",
+    });
+  };
+
+  return (
+    <Modal>
+      <h1>
+        Add New Element <button onClick={closeModal}>X</button>
+      </h1>
+      <input type="text" onChange={handleElementNameChange} placeholder="Element Name" /> <br />
+      <input type="text" onChange={handleElementDescriptionChange} placeholder="Element Description" />
+      <br />
+      <button onClick={handleSubmit}>Add Element</button>
+    </Modal>
+  );
+}
+
+export default NewElementModal;