s1

app/components/QuizList.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react';
+
+interface QuizModule {
+    quizName: string;
+    quizId: string;
+    totalQuestion: string;
+    internalMarks: string;
+    attendance: string;
+    moduleId: string;
+}
+
+export default function AdminIndex() {
+    const [quizList, setQuizList] = useState<QuizModule[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
+
+    useEffect(() => {
+        fetch(`https://api.teachertrainingkolkata.in/api/quiz-list`)
+            .then(res => {
+                if (!res.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return res.json();
+            })
+            .then(data => {
+                console.log(data);
+                setQuizList(data);
+                setLoading(false);
+            })
+            .catch(error => {
+                console.error('An error occurred', error);
+                setError(error);
+                setLoading(false);
+            });
+    }, []); // Dependency array to run the effect only once on mount
+
+    if (loading) {
+        return <div>Loading...</div>;
+    }
+
+    if (error) {
+        return <div>Error: {error.message}</div>;
+    }
+
+    return (
+        <div>
+            <section className="container mx-auto px-4">
+                <div>
+                    <table className='w-full'>
+                        <thead>
+                            <tr>
+                                <th>Quiz ID</th>
+                                <th>Quiz Name</th>
+                                <th>Total Question</th>
+                                <th>internalMarks</th>
+                                <th>Attendance</th>
+                                <th>Module ID</th>
+                                <th className=''>Action</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {quizList.map(quiz => (
+                                <tr key={quiz.quizId}>
+                                    <td>{quiz.quizId}</td>
+                                    <td>{quiz.quizName}</td>
+                                    <td>{quiz.totalQuestion}</td>
+                                    <td>{quiz.internalMarks}</td>
+                                    <td>{quiz.attendance}</td>
+                                    <td>{quiz.moduleId}</td>
+                                    <td>
+                                        <div className='flex flex-row space-x-2'>
+                                            <a href={`/admin/edit-quiz?id=${quiz.quizId}`}>Edit</a>
+                                            <span>|</span>
+                                            <a href="">Delete</a>
+                                        </div>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+        </div>
+    );
+}