Add: add Create-Course page

nqq203 · Mar 19, 2024 · 66a8a12 · 66a8a12
1 parent 0a51f53
commit 66a8a12
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 24 deletions.
diff --git a/src/App.js b/src/App.js
@@ -7,9 +7,10 @@ import {
 import Header from './components/Header/Header';
 import Footer from './components/Footer/Footer';
 import SignUp from './page/SignUp/SignUp';
-import InstructorCourse from './page/Course/InstructorCourse';
+import InstructorCourse from './page/CreateCourse/InstructorCourse';
+import InstructorCreateCourse from './page/CreateCourse/InstructorCreateCourse';
 
-export default function App() {
+export default function App() { 
   return (
     <BrowserRouter>
       <Header />
@@ -18,6 +19,8 @@ export default function App() {
           <Route path="/" />
           <Route path="/sign-up" element={<SignUp />}/>
           <Route path="/instructor/courses" element={<InstructorCourse />}/>
+          <Route path="/instructor/courses/create" element={<InstructorCreateCourse />}/>
+
         </Routes>
       </main>
       <Footer/>

diff --git a/src/page/Course/InstructorCourse.js → src/page/CreateCourse/InstructorCourse.js b/src/page/Course/InstructorCourse.js → src/page/CreateCourse/InstructorCourse.js
@@ -1,40 +1,49 @@
 import styled from "styled-components";
 import { Button } from "../../components/Button/Button";
+import { useNavigate } from "react-router-dom";
 
 export default function InstructorCourse() {
+  const navigate = useNavigate();
+  function onNavgigateToCreate() {
+    // navigate("/instructor/courses/create");
+  }; 
+
   return <InstructorCourseWrapper>
     <CourseCreation>
       <div className="course-creation_text">Jump Into Course Creation</div>
-      <Button bgColor={'var(--color-purple-300)'} fontWeight={700} hoverBgColor={'var(--color-purple-400)'}>Create Your Course</Button>
+      <Button bgColor={'var(--color-purple-300)'} fontWeight={700} hoverBgColor={'var(--color-purple-400)'} onClick={onNavgigateToCreate}>Create Your Course</Button>
     </CourseCreation>
     <div className="course-creation_description">Based on your experience, we think these resources will be helpful.</div>
     <CourseGetStarted>
-      <div className="course-getstarted_engage">
-        <img src="../../../assets/engaging-course.jpg"/>
-        <div className="course-engagement">
-          <h4 className="course-engagement-title">Create an Engaging Course</h4>
-          <div className="course-engagement-description">Whether you've been teaching for years or are teaching for the first time, you can make an engaging course. We've compiled resources and best practices to help you get to the next level, no matter where you're starting.</div>
+      <div className="course-one-box">
+        <img src="../../../assets/engaging-course.jpg" alt="engaging-course"/>
+        <div className="course-one-box_content">
+          <h4>Create an Engaging Course</h4>
+          <div>Whether you've been teaching for years or are teaching for the first time, you can make an engaging course. We've compiled resources and best practices to help you get to the next level, no matter where you're starting.</div>
         </div>
       </div>
-      <div className="course-creation-and-audience">
+      <div className="course-two-box">
         <div className="course-create-video">
-          <img src="../../../assets/video-creation.jpg"/>
+          <img src="../../../assets/video-creation.jpg" alt="video-creation"/>
           <div className="video-creation">
             <h4 className="video-creation-title">Get Started with Video</h4>
             <div className="video-creation-description">Quality video lectures can set your course apart. Use our resources to learn the basics.</div>
           </div>
         </div>
         <div className="course-build-audience">
-          <img src="../../../assets/build-audience.jpg"/>
+          <img src="../../../assets/build-audience.jpg" alt="build-audience"/>
           <div className="build-audience">
             <h4 className="build-audience-title">Build Your Audience</h4>
             <div className="build-audience-description">Set your course up for success by building your audience.</div>
           </div>
         </div>
       </div>
-      <div className="course-newcomer">
-        <h4 className="course-newcomer-title"></h4>
-        <div className="course-newcomer-description">Get exclusive tips and resources designed to help you launch your first course faster! Eligible instructors who publish their first course on time will receive a special bonus to celebrate. Start today!</div>
+      <div className="course-one-box" style={{marginTop: "20px"}}>
+        <img src="../../../assets/engaging-course.jpg" alt="engaging-course"/>
+        <div className="course-one-box_content">
+          <h4>Join the New Instructor Challenge!</h4>
+          <div>Get exclusive tips and resources designed to help you launch your first course faster! Eligible instructors who publish their first course on time will receive a special bonus to celebrate. Start today!</div>
+        </div>
       </div>
     </CourseGetStarted>
   </InstructorCourseWrapper>
@@ -83,7 +92,7 @@ const CourseGetStarted = styled.div`
   flex-direction: column;
   margin: 50px 100px;
   
-  .course-getstarted_engage {
+  .course-one-box {
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -93,41 +102,41 @@ const CourseGetStarted = styled.div`
     box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.08);
 
     img {
-      width: 200px;
+      width: 15%;
       height: auto;
-      padding-bottom: 40px;
+      padding: 2vh;
     }
 
     div {
-      width: 610px;
+      width: 80%;
 
       h4 {
         font-weight: 500;
         font-size: 25px;
       }
       div {
         padding-bottom: 40px;
-        font-weight: 500;
       }
     }
   }
 
-  .course-creation-and-audience {
+  .course-two-box {
     margin-top: 20px;
     display: flex;
     flex-direction: row;
     gap: 20px;
 
     img {
-      width: 200px;
+      width: 30%;
       padding-bottom: 40px;
+      padding: 2vh;
     }
 
     .course-create-video,
     .course-build-audience {
       display: flex;
       flex-direction: row;
-      width: 50%;
+      width: 100%;
       justify-content: space-around;
       border: 1px solid var(--color-gray-200);
       box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.08);
@@ -139,10 +148,10 @@ const CourseGetStarted = styled.div`
       }
 
       div {
-        width: 400px;
+        width: 70%;
         display: flex;
         flex-direction: column;
-        padding-bottom: 40px;
+        padding-bottom: 40px;                              
       }
     }
   }

diff --git a/src/page/CreateCourse/InstructorCreateCourse.js b/src/page/CreateCourse/InstructorCreateCourse.js
@@ -0,0 +1,80 @@
+import { useState } from "react";
+import styled from "styled-components";
+
+export default function InstructorCreateCourse() {
+  const [contentItems, setContentItems] = useState([
+    {
+      id: 1,
+      title: "Level",
+    },
+    {
+      id: 2,
+      title: "Curriculum",
+    }
+  ]);
+  const [publishItems, setPublishItems] = useState([
+    {
+      id: 1,
+      title: "Course landing page",
+    },
+    {
+      id: 2,
+      title: "Pricing",
+    }
+  ]);
+  return (
+    <InstructorCreateCourseWrapper>
+      <CreateCourseOptionBar>
+        <CreateContent>
+          <h4>Create your content</h4>
+          {contentItems.map((item) => {
+            return <div key={item.id} style={{display: "flex", flexDirection: "row"}}>
+              <div className="icon"></div>
+              <div>{item.title}</div>
+            </div>
+          })}
+        </CreateContent>
+        <PublishCourse>
+          <h4>Publish your course</h4>
+          {publishItems.map((item) => {
+            return <div key={item.id} style={{display: "flex", flexDirection: "row"}}>
+              <div className="icon"></div>
+              <div>{item.title}</div>
+            </div>
+          })}
+        </PublishCourse>
+
+      </CreateCourseOptionBar>
+      <CreateCourseMain>
+        <h1>Create Course</h1>
+      </CreateCourseMain>
+    </InstructorCreateCourseWrapper>
+  );
+}
+
+const InstructorCreateCourseWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  
+  h4 {
+    margin: 0;
+  }
+`
+
+const CreateCourseOptionBar = styled.div`
+  width: 20%;
+`
+
+const CreateCourseMain = styled.div`
+  width: 80%;
+  
+`
+
+const CreateContent = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const PublishCourse = styled.div`
+
+`