Issue 44 create quiz frontend

client/src/components/navbar.tsx

@@ -30,7 +30,7 @@ export default function Navbar() {
             <Button
               variant={"outline"}
               size={"lg"}
-              className="font-roboto border-2 border-black text-lg"
+              className="border-2 border-black font-roboto text-lg"
             >
               Login
             </Button>

client/src/components/ui/Competition/competition.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+
+function Competition() {
+  return (
+    <>
+      <h1 className="text-center">Past Questions and Solutions</h1>
+      <div className="flex flex-col items-center gap-5">
+        <Button className="h-[66px] w-[998px] rounded-[5px] border-[1.5px] border-black bg-[#FFE8A3] text-[22px]">
+          Competition Name (e.g 2024)
+        </Button>
+        <Button>Competition Name (e.g 2024)</Button>
+        <Button>Competition Name (e.g 2024)</Button>
+      </div>
+      <h1 className="text-center">Practice Test</h1>
+      <div className="flex flex-col items-center gap-4">
+        <Button>Practice Test Name (e.g.WAJO Practice Test A)</Button>
+        <Button>Practice Test Name (e.g.WAJO Practice Test A)</Button>
+      </div>
+    </>
+  );
+}
+
+export default Competition;

client/src/components/ui/Question/data-grid.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 
 import { Button } from "@/components/ui/button";
-import { Pagination } from "@/components/ui/pagination";
+import Pagination from "@/components/ui/pagination";
 import {
   Table,
   TableBody,
@@ -90,10 +90,10 @@ export function Datagrid({
             </TableHead>
             <TableHead className="w-1/4">
               <div className="flex items-center text-white">
-                <span>Category</span>
+                <span>Genre</span>
                 <span
                   className="ml-2 cursor-pointer"
-                  onClick={() => sortByColumn("category")}
+                  onClick={() => sortByColumn("genre")}
                 >
                   <svg
                     width="10"
@@ -138,9 +138,7 @@ export function Datagrid({
               className={"divide-gray-200 border-gray-50 text-sm text-black"}
             >
               <TableCell className="w-1/4">{item.name || "\u00A0"}</TableCell>
-              <TableCell className="w-1/4">
-                {item.category || "\u00A0"}
-              </TableCell>
+              <TableCell className="w-1/4">{item.genre || "\u00A0"}</TableCell>
               <TableCell className="w-1/4">
                 {item.difficulty || "\u00A0"}
               </TableCell>

client/src/components/ui/Test/competition-data-grid.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import { SortIcon } from "@/components/ui/icon";
-import { Pagination } from "@/components/ui/pagination";
+import Pagination from "@/components/ui/pagination";
 import {
   Table,
   TableBody,

client/src/components/ui/Test/insight-data-grid.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 
-import { Pagination } from "@/components/ui/pagination";
+import Pagination from "@/components/ui/pagination";
 import {
   Table,
   TableBody,

client/src/components/ui/Test/leaderboard-data-grid.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 
 import { Button } from "@/components/ui/button";
-import { Pagination } from "@/components/ui/pagination";
+import Pagination from "@/components/ui/pagination";
 import {
   Table,
   TableBody,

client/src/components/ui/Test/practice-data-grid.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 
 import { Button } from "@/components/ui/button";
-import { Pagination } from "@/components/ui/pagination";
+import Pagination from "@/components/ui/pagination";
 import {
   Table,
   TableBody,

client/src/components/ui/Test/ranking-data-grid.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 
-import { Pagination } from "@/components/ui/pagination";
+import Pagination from "@/components/ui/pagination";
 import {
   Table,
   TableBody,

client/src/components/ui/Users/data-grid.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 
 import { Button } from "@/components/ui/button";
-import { Pagination } from "@/components/ui/pagination";
+import Pagination from "@/components/ui/pagination";
 import {
   Table,
   TableBody,

client/src/components/ui/Users/school-data-grid.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 
 import { Button } from "@/components/ui/button";
-import { Pagination } from "@/components/ui/pagination";
+import Pagination from "@/components/ui/pagination";
 import {
   Table,
   TableBody,

client/src/components/ui/Users/team-data-grid.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 
 import { Button } from "@/components/ui/button";
-import { Pagination } from "@/components/ui/pagination";
+import Pagination from "@/components/ui/pagination";
 import {
   Table,
   TableBody,
@@ -114,7 +114,7 @@ export function TeamDataGrid({
       <Pagination
         totalPages={totalPages}
         currentPage={currentPage}
-        onPageChange={(page) => handlePageChange(page)}
+        onPageChange={(page: number) => handlePageChange(page)}
         className="mr-20 mt-5 flex justify-end"
       />
     </div>

client/src/components/ui/auto-saving.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+interface Props {
+  answer: string;
+  setAnswer: (value: string) => void;
+}
+
+const AutoSavingAnswer: React.FC<Props> = ({ answer, setAnswer }) => {
+  return (
+    <input
+      type="text"
+      value={answer}
+      onChange={(e) => setAnswer(e.target.value)}
+      placeholder="Please input your answer"
+      className="mt-4 h-10 w-full min-w-64 rounded-sm border border-slate-500 px-2"
+    />
+  );
+};
+
+export default AutoSavingAnswer;

client/src/components/ui/buttonList.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+
+interface ButtonListProps {
+  currentPage: number;
+  setCurrentPage: (page: number) => void;
+  totalQuestions: number;
+}
+
+const ButtonList: React.FC<ButtonListProps> = ({
+  currentPage,
+  setCurrentPage,
+  totalQuestions,
+}) => {
+  const [startIndex, setStartIndex] = useState(0);
+  const [endIndex, setEndIndex] = useState(10);
+  const buttonsPerPage = 10;
+
+  const updateIndexes = () => {
+    // if (currentPage > endIndex) {
+    //   setStartIndex(currentPage - 1);
+    //   setEndIndex(currentPage + 9);
+    // } else if (currentPage < startIndex) {
+    //   setStartIndex(currentPage - 1);
+    //   setEndIndex(currentPage + 9);
+    // }
+    if (startIndex === 0) {
+      if (currentPage < 10) {
+        setStartIndex(0);
+        setEndIndex(10);
+      } else if (currentPage >= 10) {
+        setStartIndex(6);
+        setEndIndex(16);
+      }
+    } else if (currentPage === 7) {
+      setStartIndex(0);
+      setEndIndex(10);
+    }
+  };
+
+  const handleClick = (num: number) => {
+    setCurrentPage(num);
+    updateIndexes();
+
+    console.log(startIndex);
+    console.log(endIndex);
+  };
+
+  useEffect(() => {
+    updateIndexes();
+  }, [currentPage]);
+
+  return (
+    <div>
+      <div className="flex flex-wrap gap-1">
+        {Array.from({ length: endIndex - startIndex }, (_, i) => (
+          <Button
+            className="m-2"
+            variant={startIndex + i + 1 === currentPage ? "default" : "outline"}
+            size="icon"
+            onClick={() => handleClick(startIndex + i + 1)}
+            key={startIndex + i}
+          >
+            {startIndex + i + 1}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ButtonList;

client/src/components/ui/countdown-display.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+interface CountdownDisplayProps {
+  timeLeft: number | null;
+}
+
+const formatTime = (timeLeft: number) => {
+  const hours = Math.floor(timeLeft / 3600);
+  const minutes = Math.floor((timeLeft - hours * 3600) / 60);
+  const secs = timeLeft % 60;
+  return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+};
+
+const CountdownDisplay: React.FC<CountdownDisplayProps> = ({ timeLeft }) => {
+  return (
+    <div>
+      {timeLeft !== null ? (
+        <div className="rounded-full bg-green-500 px-6 py-2 text-lg font-semibold text-white shadow-md">
+          Time Left: {formatTime(timeLeft)}
+        </div>
+      ) : (
+        <h2>Click "Start Quiz" to begin</h2>
+      )}
+    </div>
+  );
+};
+
+export default CountdownDisplay;