style: continuation of quiz attempts

src/components/AttemptHistoryTable/AttemptHistoryTable.tsx

@@ -1,8 +1,8 @@
 import { useEffect } from "react";
 import { useLazyQuery } from "@apollo/client";
-import { Typography } from "@material-tailwind/react";
-import { differenceInMinutes, differenceInSeconds } from "date-fns";
-import { Loader2 } from "lucide-react";
+import { Button, Typography } from "@material-tailwind/react";
+import { ChevronRight, Loader2 } from "lucide-react";
+import { ScoreChip } from "@components/ScoreChip/ScoreChip.tsx";
 import { useUserStore } from "@state/userStore.ts";
 import { GET_QUIZ_ATTEMPTS } from "@utils/queries/QuizAttempts.ts";
 
@@ -22,23 +22,28 @@ export function AttemptHistoryTable({ quizId }: QuizAttemptProps) {
 
   if (!userId) return null;
 
-  console.log(data);
-
   return (
     <div className="flex w-full flex-col">
-      <Typography className="font-medium">Attempt History</Typography>
+      <section className="flex items-center justify-between">
+        <Typography variant="h2" className="text-xl font-medium">
+          Attempt History
+        </Typography>
+        <Button variant="outlined" color="deep-orange" size="sm">
+          View All
+        </Button>
+      </section>
       {loading ? (
         <Loader2 size={20} className="mt-4 animate-spin" />
       ) : (
-        <div className="mt-4">
-          {data?.attempts.map(({ id, correctOptions, startTime, endTime, quiz: { questions } }) => {
-            const percentage = (correctOptions / questions.length) * 100;
-            const minutes = differenceInMinutes(new Date(endTime), new Date(startTime));
-            const seconds = differenceInSeconds(new Date(endTime), new Date(startTime));
-
+        <div className="mt-4 flex flex-col gap-2">
+          {data?.attempts.map(({ id, percentage, minutes, seconds }, index) => {
             return (
-              <div key={id} className="">
-                {percentage}% - took {minutes} minutes and {seconds} seconds
+              <div key={id} className="flex items-center">
+                <Typography className="mr-2 text-lg font-medium">{index + 1}.</Typography>
+                <ScoreChip percentage={percentage} /> <ChevronRight className="mx-2 size-6" />
+                <Typography className="">
+                  {minutes}m : {seconds}s
+                </Typography>
               </div>
             );
           })}

src/components/QuizAttempt/QuizAttempt.tsx

@@ -77,7 +77,7 @@ export function QuizAttempt({ quiz }: QuizAttemptProps) {
       <>
         <Button
           variant="gradient"
-          className="mt-10"
+          className="mt-6"
           color="green"
           fullWidth
           onClick={() => {