chore: use lectures naming

front/components/Modals/CourseEdit/NewLecture.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import { ArrowLeftIcon, Cross1Icon } from "@radix-ui/react-icons";
+import Modal from "../Modal";
+import styled from "styled-components";
+import DynamicCanvaModal from "./NewLectureModal/DynamicCanva";
+import VideoModal from "./NewLectureModal/Video";
+
+function NewLectureModal({ closeModal, submitLecture, submitFileLecture, chapterId }: any) {
+  const [selectedView, setSelectedView] = useState("home");
+
+  return (
+    <Modal>
+      <button onClick={ () => {setSelectedView("home")}}>
+        <ArrowLeftIcon />
+      </button>
+      <button onClick={closeModal}>
+        <Cross1Icon />
+      </button>
+      <h1>Add New Lecture</h1>
+      <br />
+
+      {selectedView === "home" && (
+        <LectureChooserWrapper>
+          <LectureButton onClick={() => {setSelectedView("dynamic")}}>✨📄</LectureButton>
+          <LectureButton onClick={() => {setSelectedView("video")}}>📹</LectureButton>
+        </LectureChooserWrapper>
+      )}
+
+      {selectedView === "dynamic" && (
+        <DynamicCanvaModal submitLecture={submitLecture} chapterId={chapterId} />
+      )}
+
+      {selectedView === "video" && (
+        <VideoModal submitFileLecture={submitFileLecture} chapterId={chapterId} />
+      )}
+      
+    </Modal>
+  );
+}
+
+const LectureChooserWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+`;
+
+const LectureButton = styled.button`
+  padding: 20px;
+  border-radius: 10px;
+  border: none;
+  font-size: 50px;
+  background-color: #8c949c33;
+  cursor: pointer;
+  &:hover {
+    background-color: #8c949c7b;
+  }
+`;
+
+export default NewLectureModal;