created my courses components for instructor dashboard

frontend/src/components/core/Dashboard/InstructorCourses/MyCourses.jsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import { VscAdd } from "react-icons/vsc";
+import { useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { fetchInstructorCourses } from "../../../../services/operations/courseDetailsAPI.js";
+import IconBtn from "../../../common/IconBtn.jsx";
+import CoursesTable from "./CoursesTable.jsx";
+
+export default function MyCourses() {
+  const { token } = useSelector((state) => state.auth);
+  const navigate = useNavigate();
+  const [courses, setCourses] = useState([]);
+
+  useEffect(() => {
+    const fetchCourses = async () => {
+      const result = await fetchInstructorCourses(token);
+      if (result) setCourses(result);
+    };
+    fetchCourses();
+  }, []);
+
+  return (
+    <div>
+      <div className="mb-14 flex items-center justify-between">
+        <h1 className="text-3xl font-medium text-richblack-5">My Courses</h1>
+        <IconBtn
+          text="Add Course"
+          onclick={() => navigate("/dashboard/add-course")}
+        >
+          <VscAdd />
+        </IconBtn>
+      </div>
+      {courses && <CoursesTable courses={courses} setCourses={setCourses} />}
+    </div>
+  );
+}