implemented course fetch functionality

src/app/coursesPage/[id]/page.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+
+interface CourseDetail {
+  id: string;
+  title: string;
+  description: string;
+}
+
+const CourseDetailPage = () => {
+  const params = useParams();
+  const id = params?.id as string | undefined;
+
+  const [course, setCourse] = useState<CourseDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [notFound, setNotFound] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!id) {
+      setNotFound(true);
+      setLoading(false);
+      return;
+    }
+
+    const fetchCourse = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        setNotFound(false);
+
+        const res = await fetch(
+          `${process.env.NEXT_PUBLIC_API_URL}/courses/${id}`
+        );
+
+        if (res.status === 404) {
+          setNotFound(true);
+          return;
+        }
+
+        if (!res.ok) {
+          throw new Error("Failed to fetch course");
+        }
+
+        const data: CourseDetail = await res.json();
+        setCourse(data);
+      } catch (err) {
+        console.error(err);
+        setError("Something went wrong while loading the course.");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchCourse();
+  }, [id]);
+
+
+
+  if (loading) {
+    return (
+      <div className="w-full h-screen flex items-center justify-center">
+        <p>Loading course...</p>
+      </div>
+    );
+  }
+
+  if (notFound) {
+    return (
+      <div className="w-full h-screen flex items-center justify-center">
+        <p>Course not found.</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="w-full h-screen flex items-center justify-center">
+        <p>{error}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full h-screen flex items-center justify-center flex-col gap-3">
+      <h1 className="text-2xl font-bold">{course?.title}</h1>
+      <p className="text-gray-400">{course?.description}</p>
+    </div>
+  );
+};
+
+export default CourseDetailPage;

src/app/coursesPage/components/courseCard.tsx

@@ -3,6 +3,7 @@ import { CourseCardProps, CourseCategory } from "@/lib/interface";
 import { Star, Clock } from "lucide-react";
 import { useState } from "react";
 import { grantAccess } from "../../../../contract_connections/CourseRegistry/grantAccess";
+import Link from "next/link";
 
 const CourseCard: React.FC<CourseCardProps> = ({ course }) => {
   const [userAddress] = useState("0x1234567890123456789012345678901234567890");
@@ -96,12 +97,18 @@ const CourseCard: React.FC<CourseCardProps> = ({ course }) => {
           <span className="text-base sm:text-lg text-white font-bold mt-2">
             {course.price ? (typeof course.price === 'number' ? course.price.toFixed(2) : course.price) : 'Free'} XLM
           </span>
-          <button
+
+
+
+{/* This takes the user to the course page  */}
+          <Link
+          href={`/coursesPage/${course.id}`}
             className="bg-pink-800 text-white px-3 py-2 sm:px-4 rounded-full font-medium transition-colors text-xs sm:text-sm mt-2"
-            onClick={() => handleEnroll(typeof course.id === 'string' ? parseInt(course.id, 10) : course.id)}
           >
             Enroll Now
-          </button>
+          </Link>
+
+
         </div>
       </div>
     </div>