dynamic data

app/components/QuizzesScore.tsx

@@ -1,130 +1,43 @@
-import React from 'react';
 import { Flex, Progress } from 'antd';
+import React, { useEffect, useState } from 'react';
+interface Performer {
+  quizId: number;
+  quizType: string;
+  quizName: string;
+  percentage: string;
+}
 
-let quizData = [
-    {
-      quizId: 1,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 1",
-      percentage: "60"
-    },
-    {
-      quizId: 2,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 2",
-      percentage: "75"
-    },
-    {
-      quizId: 3,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 3",
-      percentage: "80"
-    },
-    {
-      quizId: 4,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 4",
-      percentage: "65"
-    },
-    {
-      quizId: 5,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 5",
-      percentage: "70"
-    },
-    {
-      quizId: 6,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 6",
-      percentage: "85"
-    },
-    {
-      quizId: 7,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 7",
-      percentage: "90"
-    },
-    {
-      quizId: 8,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 8",
-      percentage: "95"
-    },
-    {
-      quizId: 9,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 9",
-      percentage: "88"
-    },
-    {
-      quizId: 10,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 10",
-      percentage: "92"
-    },
-    {
-      quizId: 11,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 11",
-      percentage: "77"
-    },
-    {
-      quizId: 12,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 12",
-      percentage: "82"
-    },
-    {
-      quizId: 13,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 13",
-      percentage: "68"
-    },
-    {
-      quizId: 14,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 14",
-      percentage: "73"
-    },
-    {
-      quizId: 15,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 15",
-      percentage: "79"
-    },
-    {
-      quizId: 16,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 16",
-      percentage: "87"
-    },
-    {
-      quizId: 17,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 17",
-      percentage: "93"
-    },
-    {
-      quizId: 18,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 18",
-      percentage: "67"
-    },
-    {
-      quizId: 19,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 19",
-      percentage: "89"
-    },
-    {
-      quizId: 20,
-      quizType: "AI Quiz",
-      quizName: "Assessment on Special Education - 20",
-      percentage: "91"
-    }
-  ]
+export default function quizScoreData() {
+    const [quizData, setData] = useState<Performer[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
 
-export default function Index(){
+
+    useEffect(() => {
+        fetch('https://iimtt-api.s38.siliconpin.com/api/quiz-score')
+          .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>
             <div className="border-[1px] border-[#CFCFCF] rounded-t-[10px]" style={{background: 'linear-gradient(138.22deg, #4377C6 0%, #092E76 180.99%)'}}>
@@ -148,5 +61,5 @@ export default function Index(){
     )
 }
 
-
+// quiz-details
 {/* <Progress type="dashboard" percent={75} gapDegree={30} /> */}