dynamic data

app/components/KnowledgeQuests.tsx

@@ -1,31 +1,43 @@
-let knowledgeData = [
-    {
-      id: "1",
-      status: "1",
-      title: "Assessment on Special Education",
-      challenge: "Challenge yourself & climb the leaderboard.",
-      question: "Subjective Question",
-      img: "../../assets/knowledge1.jpg"
-    },
-    {
-      id: "2",
-      status: "1",
-      title: "Quiz on Children Psychology",
-      challenge: "Challenge yourself & climb the leaderboard.",
-      question: "MCQ",
-      img: "../../assets/knowledge2.jpg"
-    },
-    {
-      id: "3",
-      status: "1",
-      title: "Quiz on Montessori Methods",
-      challenge: "Challenge yourself & climb the leaderboard.",
-      question: "MCQ",
-      img: "../../assets/knowledge3.jpg"
-    }
-];
+import React, { useEffect, useState } from 'react';
+interface Performer {
+    id: number;
+    title: string;
+    img: string;
+    challenge: string;
+    question: string;
+}
 
-export default function(){
+export default function KnowledgeQuests() {
+    const [knowledgeData, setData] = useState<Performer[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
+
+
+    useEffect(() => {
+        fetch('https://iimtt-api.s38.siliconpin.com/api/knowledge-quests')
+          .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=''>
             <div className=''>
@@ -51,4 +63,4 @@ export default function(){
             </div>
         </section> 
     )
-}
+}