feat(ui): add modal functionality, leaderboard view

components/Header.tsx

@@ -6,6 +6,7 @@ import { useTimer } from "@/context/TimerContext";
 import styles from "@/css/Header.module.css";
 import { useExam } from "@/context/ExamContext";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { useModal } from "@/context/ModalContext";
 
 const API_URL = "https://examjam-api.pptx704.com";
 
@@ -28,6 +29,7 @@ const Header = ({
   examDuration,
 }) => {
   const router = useRouter();
+  const { open } = useModal();
   const { clearExam } = useExam();
   const [totalSeconds, setTotalSeconds] = useState(
     examDuration ? parseInt(examDuration) * 60 : 0
@@ -147,7 +149,7 @@ const Header = ({
               </span>
               <span className={styles.timeLabel}>Mins</span>
             </div>
-            <div className={styles.timeUnit}>
+            <div className={styles.timeUnit} style={{ borderRight: "none" }}>
               <span className={styles.timeValue}>
                 {String(seconds).padStart(2, "0")}
               </span>
@@ -156,8 +158,7 @@ const Header = ({
           </div>
 
           <button
-            disabled
-            onClick={() => router.push("/exam/modal")}
+            onClick={open}
             className={`${styles.iconButton} ${styles.disabled}`}
           >
             <Layers size={30} color="white" />