added a timer with custom end alarm sounf

app/results/[id]/page.tsx

@@ -10,12 +10,14 @@ interface data {
 }
 
 export default async function Page({ params }: { params: { id: string } }) {
-	const grades = await Prisma.grade.findMany({ where: { testId: parseInt(params.id) } });
+	const teacherGrade = await Prisma.grade.findFirst({ where: { testId: parseInt(params.id), user: { isTeacher: true } } });
+
+	const grades = await Prisma.grade.findMany({where: {testId: parseInt(params.id), user: {isTeacher: false}}});
+
 	const allGrades = ['1', '1.5', '2', '2.5', '3', '3.5', '4', '4.5', '5', '5.5', '6'];
 	let gradeOccurences = new Array(allGrades.length).fill(0);
 	const gradeList = grades.map((grade) => grade.grade);
 
-	const teacherGrade = await Prisma.grade.findFirst({ where: { testId: parseInt(params.id), user: { isTeacher: true } } });
 
 	for (let i = 0; i < gradeList.length; i++) {
 		gradeOccurences[allGrades.indexOf(gradeList[i].toString())]++;
@@ -31,13 +33,13 @@ export default async function Page({ params }: { params: { id: string } }) {
 
 	return (
 		<div className={'p-4 md:p-12 w-full h-screen bg-black flex flex-col justify-between gap-y-4'}>
+			<Image src={logo} alt={'Logo'} width={100} height={200} className={'mx-auto w-full md:w-[400px]'} />
 			{teacherGrade && (
 				<div className={'flex flex-col gap-y-2'}>
 					<p className="text-white">Mme Tixhon :</p>
 					<h2 className={'text-4xl font-bold text-white'}>{teacherGrade.grade}</h2>
 				</div>
 			)}
-			<Image src={logo} alt={'Logo'} width={100} height={200} className={'mx-auto w-full md:w-[400px]'} />
 			<Chart data={data} />
 		</div>
 	);

components/custom/countdown.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import React from 'react';
+import { useTimer } from 'react-timer-hook';
+
+import { Button } from "@components/ui/button";
+import { PauseIcon, Play} from "lucide-react";
+
+interface MyTimerProps {
+    expiryTimestamp: Date;
+    onEnd?: () => void;
+}
+
+export default function MyTimer({ expiryTimestamp, onEnd } : MyTimerProps) {
+    const {
+        seconds,
+        minutes,
+        isRunning,
+        pause,
+        resume,
+    } = useTimer({
+        expiryTimestamp,
+        onExpire: () => onEnd && onEnd()
+    })
+
+    return (
+        <div className={"text-white text-center flex flex-col"}>
+            <div className={"font-bold text-8xl"}>
+                <span>{String(minutes).padStart(2, "0")}</span>:
+                <span>{String(seconds).padStart(2, "0")}</span>
+            </div>
+            <p>{isRunning ? 'Running' : 'Not running'}</p>
+            <div className={"self-center flex gap-4"}>
+                <Button onClick={pause} disabled={!isRunning}>
+                    <PauseIcon/>
+                </Button>
+                <Button onClick={resume} disabled={isRunning}>
+                    <Play/>
+                </Button>
+            </div>
+        </div>
+    );
+}

package-lock.json

@@ -23,6 +23,7 @@
         "react": "^18",
         "react-chartjs-2": "^5.2.0",
         "react-dom": "^18",
+        "react-timer-hook": "^3.0.7",
         "socket.io": "^4.7.2",
         "socket.io-client": "^4.7.2",
         "swr": "^2.2.4",
@@ -4435,6 +4436,14 @@
         }
       }
     },
+    "node_modules/react-timer-hook": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/react-timer-hook/-/react-timer-hook-3.0.7.tgz",
+      "integrity": "sha512-ATpNcU+PQRxxfNBPVqce2+REtjGAlwmfoNQfcEBMZFxPj0r3GYdKhyPHdStvqrejejEi0QvqaJZjy2lBlFvAsA==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -24,6 +24,7 @@
     "react": "^18",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18",
+    "react-timer-hook": "^3.0.7",
     "socket.io": "^4.7.2",
     "socket.io-client": "^4.7.2",
     "swr": "^2.2.4",

tsconfig.json

@@ -25,8 +25,9 @@
       "@styles/*": ["/styles/*"],
       "@santa/*": ["./images/santa/*"],
       "@images/*": ["./images/*"],
+      "@assets/*": ["./assets/*"],
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "**/*.d.ts"],
   "exclude": ["node_modules"]
 }

types/sounds.d.ts

@@ -0,0 +1,4 @@
+declare module '*.mp3' {
+  const content: string;
+  export default content;
+}