dynamic data

app/components/ContinueLearning.tsx

@@ -1,28 +1,43 @@
-let courseData = [
-    {
-      id : "1",
-      title : "Life History of Dr. Maria Montessori",
-      chapter : "1",
-      Program : "Graduate Program",
-      img : "../../assets/course1.jpg"
-    },
-      {
-      id : "2",
-      title : "Introduction to Montessori Methods",
-      chapter : "2",
-      Program : "Graduate Program",
-      img : "../../assets/course2.jpg"
-    },
-    {
-      id : "3",
-      title : "Exercises on Practical Life",
-      chapter : "3",
-      Program : "Graduate Program",
-      img : "../../assets/course3.jpg"
-    }
-];
+import React, { useEffect, useState } from 'react';
+interface Performer {
+    id: number;
+    title: string;
+    chapter: string;
+    img: string;
+    Program: string;
+}
 
-export default function Index() {
+export default function ContinueLearning() {
+    const [courseData, setData] = useState<Performer[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
+
+
+    useEffect(() => {
+        fetch('https://iimtt-api.s38.siliconpin.com/api/continue-learning')
+          .then(res => {
+            if (!res.ok) {
+              throw new Error('Network response was not ok');
+            }
+            return res.json();
+          })
+          .then(data => {
+            setData(data);
+            setLoading(false);
+          })
+          .catch(error => {
+            console.error('Error fetching data:', error);
+            setError(error);
+            setLoading(false);
+          });
+        }, []);
+      if (loading) {
+        return <div>Loading...</div>;
+      }
+    
+      if (error) {
+        return <div>Error: {error.message}</div>;
+      }
     return (
         <section className='bg-[#FCFCFC]'>
             <div className='container mx-auto'>