Create course modal (#134)

* initial-commit * initial commit * created modal * npm run build * npm run build * modal update * npm run build --------- Co-authored-by: shamoo53 <aliyushamsu16@gmail.com>
skill-mind · Feb 25, 2025 · 181b808 · 181b808
1 parent 15be648
commit 181b808
Show file tree

Hide file tree

Showing 2 changed files with 473 additions and 6 deletions.
diff --git a/src/app/dashboard/tutor/component/Addcourse.tsx b/src/app/dashboard/tutor/component/Addcourse.tsx
@@ -1,9 +1,33 @@
-import { PlusIcon } from "lucide-react"
+
+import React, { useState } from "react";
+import { PlusIcon } from "lucide-react";
+import CreateCourseModal from "@/app/dashboard/tutor/component/Create-Course-Modal";
 
 export const Addcourse = () => {
-    return <div className="h-[240px] bg-[#161716] p-[24px] rounded-[8px] flex gap-[15px] flex flex-col gap-[20px] justify-between items-center">
-        <h4 className="text-center font-[400] text-[14px] ">Create a new course, publish for new learners, and earn an income.</h4>
-        <div className="h-[72px] w-[72px] bg-[#2D2E2D] flex items-center justify-center rounded-full"><PlusIcon className="w-[24px] h-[24px]" /></div>
-        <button className=" flex justify-center items-center gap-4 font-[400] text-[16px] w-[231px] h-[48px] bg-[#2D2E2D] py-[12px] px-[12px] rounded-[8px]" ><PlusIcon className="w-[16px] h-[16px] rounded-[8px]" /> CREATE NEW COURSE</button>
+  const [isModalOpen, setIsModalOpen] = useState(false); // Modal state
+
+  return (
+    <div className="h-[240px] bg-[#161716] p-[24px] rounded-[8px] flex flex-col gap-[20px] justify-between items-center  relative overflow-x-auto">
+      <h4 className="text-center font-[400] text-[14px]">
+        Create a new course, publish for new learners, and earn an income.
+      </h4>
+      <div className="h-[72px] w-[72px] bg-[#2D2E2D] flex items-center justify-center rounded-full">
+        <PlusIcon className="w-[24px] h-[24px]" />
+      </div>
+      <button
+        className="flex justify-center items-center gap-4 font-[400] text-[16px] w-[231px] h-[48px] bg-[#2D2E2D] py-[12px] px-[12px] rounded-[8px]"
+        onClick={() => setIsModalOpen(true)} // Open modal on click
+      >
+        <PlusIcon className="w-[16px] h-[16px]" /> CREATE NEW COURSE
+      </button>
+
+      {/* Render modal only if isModalOpen is true */}
+      {isModalOpen && (
+        <CreateCourseModal
+          isOpen={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+        />
+      )}
     </div>
-} 
+  );
+};