UPDATE: update Instructor Create-Course layout

package.json

@@ -17,6 +17,7 @@
     "react-dropzone": "^14.2.3",
     "react-icons": "^5.0.1",
     "react-image-crop": "^11.0.5",
+    "react-moment": "^1.1.3",
     "react-number-format": "^5.3.3",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.22.1",

src/App.js

@@ -3,13 +3,14 @@ import {
   BrowserRouter,
   Route,
   Routes,
-} from "react-router-dom";
+x} from "react-router-dom";
 import Header from './components/Header/Header';
 import Footer from './components/Footer/Footer';
 import SignUp from './page/SignUp/SignUp';
 import InstructorCourse from './page/CreateCourse/InstructorCourse';
 import InstructorCreateCourse from './page/CreateCourse/InstructorCreateCourse';
 import InstructorCourseLandingPage from './page/CreateCourse/InstructorCourseLandingPage';
+import InstructorNavbar from './components/InstructorNavbar/InstructorNavbar';
 
 export default function App() { 
   return (
@@ -21,7 +22,7 @@ export default function App() {
           <Route path="/sign-up" element={<SignUp />}/>
           <Route path="/instructor/courses" element={<InstructorCourse />}/>
           <Route path="/instructor/courses/create" element={<InstructorCreateCourse />}/>
-          
+
         </Routes>
       </main>
       <Footer/>

src/components/FilterDropdown/FilterDropdown.js

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+const FilterDropdown = ({ items, setFilteredItems }) => {
+  const handleFilterChange = (event) => {
+    const value = event.target.value;
+    let sortedItems = [...items];
+
+    switch (value) {
+      case 'Newest':
+        sortedItems.sort((a, b) => b.date - a.date);
+        break;
+      case 'Oldest':
+        sortedItems.sort((a, b) => a.date - b.date);
+        break;
+      case 'A-Z':
+        sortedItems.sort((a, b) => a.title.localeCompare(b.title));
+        break;
+      case 'Z-A':
+        sortedItems.sort((a, b) => b.title.localeCompare(a.title));
+        break;
+      case 'Published':
+        sortedItems.sort((a, b) => b.published - a.published);
+        break;
+      case 'Unpublished':
+        sortedItems.sort((a, b) => a.published - b.published);
+        break;
+      default:
+        break;
+    }
+
+    setFilteredItems(sortedItems);
+  };
+
+  return (
+    <FilterDropdownWrapper>
+      <select onChange={handleFilterChange} defaultValue="Sort">
+        <option value="Sort" disabled>Sort</option>
+        <option value="Newest">Newest</option>
+        <option value="Oldest">Oldest</option>
+        <option value="A-Z">A-Z</option>
+        <option value="Z-A">Z-A</option>
+        <option value="Published">Published first</option>
+        <option value="Unpublished">Unpublished first</option>
+      </select>
+    </FilterDropdownWrapper>
+  );
+};
+
+export default FilterDropdown;
+
+
+const FilterDropdownWrapper = styled.div`
+  padding: 5px;
+  border: 1px solid var(--color-gray-400);
+  font-size: 1rem;
+  display: flex;
+
+  select:focus {
+    outline: none;
+  }
+
+  select > option {
+    font-weight: bold;
+  }
+
+  select {
+    font-weight: bold;
+    outline: 0px;
+    border: 0px;
+    font-size: 16px;
+  }
+`

src/components/InstructorNavbar/InstructorNavbar.js

@@ -0,0 +1,4 @@
+
+export default function InstructorNavbar() {
+  return (<></>);
+}

src/page/CreateCourse/InstructorCourse.js

@@ -1,17 +1,95 @@
 import styled from "styled-components";
 import { Button } from "../../components/Button/Button";
-import { useNavigate } from "react-router-dom";
+import { Link, Outlet } from "react-router-dom";
+import { IoSearch } from "react-icons/io5";
+import { useState } from "react";
+import FilterDropdown from "../../components/FilterDropdown/FilterDropdown";
+import moment from "moment";
 
 export default function InstructorCourse() {
-  const navigate = useNavigate();
-  function onNavgigateToCreate() {
-    navigate("/instructor/courses/create");
-  };
+  const initialData = [{
+    id: 1, 
+    title: "Basic C++ for Beginners",
+    price: "$29.99",
+    amountSold: 300,
+    published: moment("12/02/2023").format("DD/MM/YYYY")
+  }, {
+    id: 2, 
+    title: "Basic Python for Beginners",
+    price: "$39.99",
+    amountSold: 123,
+    published: moment("12/01/2023").format("DD/MM/YYYY")
+  }, {
+    id: 3, 
+    title: "Advanced Java, Java Spring",
+    price: "$49.99",
+    amountSold: 30,
+    published: moment("11/10/2022").format("DD/MM/YYYY")
+  }, {
+    id: 4, 
+    title: "Design with AI",
+    price: "$59.99",
+    amountSold: 12,
+    published: moment("23/12/2023").format("DD/MM/YYYY")
+  }, {
+    id: 5, 
+    title: "Training Model in Machine Learning",
+    price: "$69.99",
+    amountSold: 100,
+    published: moment("01/01/2023").format("DD/MM/YYYY")
+  }, {
+    id: 6, 
+    title: "Machine Learning for Beginners",
+    price: "$79.99",
+    amountSold: 100,
+    published: moment("12/05/2023").format("DD/MM/YYYY")
+  }, {
+    id: 7, 
+    title: "XYADSYASDGFASDF",
+    price: "$89.99",
+    amountSold: 100,
+    published: moment("12/02/2023").format("DD/MM/YYYY")
+  }, {
+    id: 8, 
+    title: "IIIOOOZXCVZXC",
+    price: "$99.99",
+    amountSold: 100,
+    published: moment("12/02/2021").format("DD/MM/YYYY")
+  }];
+  const [filteredItems, setFilteredItems] = useState(initialData);
 
   return <InstructorCourseWrapper>
+    <CourseManagement>
+      <div className="course-management-title">Courses</div>
+      <div className="course-management-header">
+        <div className="course-management-header_search">
+          <input type="text" placeholder="Search your courses"/>
+          <Button style={{display: "flex", alignItems: "center"}}><IoSearch /></Button>
+        </div>
+        <FilterDropdown items={initialData} setFilteredItems={setFilteredItems} />
+        <Button className="course-management-header_newcourse">New Course</Button>
+      </div>
+      <div className="course-management-main">
+            {filteredItems.map(item => (
+                <div className="course-management-main_courseview" key={item.id}>
+                  <img src="../../../assets/engaging-course.jpg" alt="engaging-course"/>
+                  <div className="coures-management-main_courseview_title">
+                    <div>{item.title}</div>
+                    <div style={{position: "absolute", bottom: "0"}}>Public</div>
+                  </div>
+                  <div className="course-management-main_courseview_statistic">
+                    <div>{item.price}</div>
+                    <div style={{position: "absolute", bottom: "0"}}>Sold: {item.amountSold}</div>
+                  </div>
+                </div>
+            ))}
+      </div>
+    </CourseManagement>
     <CourseCreation>
       <div className="course-creation_text">Jump Into Course Creation</div>
-      <Button bgColor={'var(--color-purple-300)'} fontWeight={700} hoverBgColor={'var(--color-purple-400)'} onClick={onNavgigateToCreate}>Create Your Course</Button>
+      <Link to="/instructor/courses/create">
+        <Button bgColor={'var(--color-purple-300)'} fontWeight={700} hoverBgColor={'var(--color-purple-400)'}>Create Your Course</Button>
+      </Link>
     </CourseCreation>
     <div className="course-creation_description">Based on your experience, we think these resources will be helpful.</div>
     <CourseGetStarted>
@@ -46,6 +124,7 @@ export default function InstructorCourse() {
         </div>
       </div>
     </CourseGetStarted>
+    <Outlet />
   </InstructorCourseWrapper>
 }
 
@@ -158,4 +237,90 @@ const CourseGetStarted = styled.div`
       }
     }
   }
+`
+
+const CourseManagement = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 50px 100px;
+  font-family: var(--font-stack-text);
+
+  .course-management-title {
+    font-weight: bold;
+    font-size: 30px;
+    font-family: var(--font-stack-heading-serif);
+    margin-bottom: 20px;
+  }
+
+  .course-management-header {
+    display: flex;
+    flex-direction: row;
+    // align-items: center;
+    gap: 20px;
+    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);
+    padding: 20px 20px 20px 20px;
+    margin-bottom: 20px;
+    position: relative;
+
+    .course-management-header_newcourse {
+      position: absolute;
+      right: 20px;
+      width: auto;
+      padding: 12px 15px;
+      background-color: var(--color-purple-300);
+      font-weight: bold;
+
+      &:hover {
+        background-color: var(--color-purple-400);
+      }
+    }
+
+    .course-management-header_search {
+      display: flex;
+      flex-direction: row;
+      height: 40px;
+
+      input[type=text] {
+        font-size: 15px;
+        padding-left: 10px;
+      }
+    }
+  }
+
+  .course-management-main {
+    display: flex;
+    flex-direction: column;
+    
+    img {
+      width: 120px;
+    }
+
+    .course-management-main_courseview {
+      display: flex;
+      gap: 20px;
+      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);
+      padding: 20px 20px 20px 20px;
+      margin-bottom: 20px;
+      position: relative;
+
+      .coures-management-main_courseview_title {
+        font-family: var(--font-stack-heading-serif);
+        position: relative;
+        font-weight: 700;
+        width: 300px;
+      }
+
+      .course-management-main_courseview_statistic {
+        display: flex;
+        flex-direction: row;
+        width: calc(100% - 420px);
+        font-family: var(--font-stack-heading);
+        position: relative;
+        font-weight: 700;
+        justify-content: flex-end;
+      }
+    }
+  } 
 `