feat: add video upload element

front/components/modals/CourseEdit/NewElement.tsx

@@ -1,39 +1,62 @@
 import React, { useState } from "react";
+import { ArrowLeftIcon, Cross1Icon } from "@radix-ui/react-icons";
 import Modal from "../Modal";
+import styled from "styled-components";
+import dynamic from "next/dynamic";
+import DynamicCanvaModal from "./NewElementModal/DynamicCanva";
+import VideoModal from "./NewElementModal/Video";
 
-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",
-    });
-  };
+function NewElementModal({ closeModal, submitElement, submitFileElement, chapterId }: any) {
+  const [selectedView, setSelectedView] = useState("home");
 
   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" />
+      <button onClick={ () => {setSelectedView("home")}}>
+        <ArrowLeftIcon />
+      </button>
+      <button onClick={closeModal}>
+        <Cross1Icon />
+      </button>
+      <h1>Add New Element</h1>
       <br />
-      <button onClick={handleSubmit}>Add Element</button>
+
+      {selectedView === "home" && (
+        <ElementChooserWrapper>
+          <ElementButton onClick={() => {setSelectedView("dynamic")}}>✨📄</ElementButton>
+          <ElementButton onClick={() => {setSelectedView("video")}}>📹</ElementButton>
+        </ElementChooserWrapper>
+      )}
+
+      {selectedView === "dynamic" && (
+        <DynamicCanvaModal submitElement={submitElement} chapterId={chapterId} />
+      )}
+
+      {selectedView === "video" && (
+        <VideoModal submitFileElement={submitFileElement} chapterId={chapterId} />
+      )}
+      
     </Modal>
   );
 }
 
+const ElementChooserWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+`;
+
+const ElementButton = styled.button`
+  padding: 20px;
+  border-radius: 10px;
+  border: none;
+  font-size: 50px;
+  background-color: #8c949c33;
+  cursor: pointer;
+  &:hover {
+    background-color: #8c949c7b;
+  }
+`;
+
 export default NewElementModal;