feat: init server side chapter add

front/components/drags/data.ts

@@ -14,3 +14,7 @@ export const initialData = {
 
   chapterOrder: ["chapter-1", "chapter-2", "chapter-3"],
 };
+
+export const initialData2 = {
+};
+

front/components/modals/Modal.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import styled from "styled-components";
+
+function Modal(props: any) {
+  return (
+    <div>
+      <Overlay>
+        <Content>{props.children}</Content>
+      </Overlay>
+    </div>
+  );
+}
+
+const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 100;
+`;
+
+const Content = styled.div`
+  background-color: white;
+  border-radius: 5px;
+  padding: 20px;
+  width: 500px;
+  height: 500px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+export default Modal;

front/components/modals/chapters/new.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/ui/layout.tsx

@@ -34,9 +34,7 @@ const Layout = (props: any) => {
           <Main className="min-h-screen">{props.children}</Main>
         </motion.main>
         <Footer>
-          <a href="" target="_blank" rel="noopener noreferrer">
-            <img src="/learnhouse_icon.png" alt="Learnhouse Logo" />
-          </a>
+          <p>LearnHouse © 2021 - {new Date().getFullYear()} - All rights reserved</p>
         </Footer>
       </AuthProvider>
     </div>