feat(components): add history list

src/app/history/page.tsx

@@ -1,7 +1,8 @@
 import { Metadata } from "next";
 
-//import "public/registry/themes.css";
-import { ThemeWrapper } from "@/components/theme-wrapper";
+import { HistoryList } from "@/components/history-list";
+import { Sidebar } from "@/components/sidebar";
+import { SiteHeader } from "@/components/site-header";
 
 export const metadata: Metadata = {
   title: "History",
@@ -10,13 +11,19 @@ export const metadata: Metadata = {
 
 export default function HistoryPage() {
   return (
-    <div className="container">
-      <ThemeWrapper
-        defaultTheme="zinc"
-        className="relative flex flex-col items-start md:flex-row md:items-center"
-      >
-        History
-      </ThemeWrapper>
-    </div>
+    <>
+      <SiteHeader />
+      <div className="flex min-h-screen w-full flex-col bg-muted/40">
+        <Sidebar />
+        <section className="container grid items-center gap-6 pb-8 pt-6 md:py-10">
+          <div className="flex max-w-[980px] flex-col items-start gap-2">
+            <h1 className="text-3xl font-extrabold leading-tight tracking-tighter md:text-4xl">
+              Exam History
+            </h1>
+          </div>
+        </section>
+        <HistoryList />
+      </div>
+    </>
   );
 }

src/components/history-list.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import Link from "next/link";
+
+interface Answer {
+  questionNumber: number;
+  question: string;
+  answer: string;
+}
+
+type TemplateDataItem = {
+  question: string;
+  answer: string;
+};
+
+type QuizHistoryItem = {
+  time: number;
+  name: string;
+  answers: Answer[];
+  templateData: TemplateDataItem[];
+  correctCount: number;
+};
+
+export function HistoryList() {
+  const quizHistory = JSON.parse(localStorage?.getItem("quizHistory") || "[]");
+
+  return (
+    <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
+      {quizHistory.length <= 0 ? (
+        <div
+          className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
+          x-chunk="history-chunk-1"
+        >
+          <div className="flex flex-col items-center gap-1 text-center">
+            <h3 className="text-2xl font-bold tracking-tight">
+              You have no exam history
+            </h3>
+            <p className="text-sm text-muted-foreground">
+              You can take an exam at the{" "}
+              <Link
+                className="font-bold transition-colors hover:text-foreground/80"
+                href="/"
+              >
+                Home
+              </Link>{" "}
+              tab.
+            </p>
+          </div>
+        </div>
+      ) : (
+        <div
+          className="flex flex-1 items-start justify-center rounded-lg border border-solid shadow-sm md:py-6"
+          x-chunk="history-chunk-1"
+        >
+          <div className="flex flex-col items-center gap-1 text-center">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Name</TableHead>
+                  <TableHead>Results</TableHead>
+                  <TableHead className="hidden md:table-cell">
+                    Created at
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {quizHistory.map(
+                  (quizHistoryItem: QuizHistoryItem, index: number) => (
+                    <TableRow key={index}>
+                      <TableCell className="font-medium">
+                        {quizHistoryItem.name}
+                      </TableCell>
+                      <TableCell className="font-medium">
+                        {quizHistoryItem.correctCount}/
+                        {quizHistoryItem.templateData.length} (
+                        {(
+                          (quizHistoryItem.correctCount /
+                            quizHistoryItem.templateData.length) *
+                          100
+                        ).toFixed(2)}
+                        %)
+                      </TableCell>
+                      <TableCell className="hidden md:table-cell">
+                        {new Date(quizHistoryItem.time).toLocaleString()}
+                      </TableCell>
+                    </TableRow>
+                  )
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      )}
+    </main>
+  );
+}

src/components/results-card.tsx

@@ -33,9 +33,14 @@ interface Answer {
   answer: string;
 }
 
+type TemplateDataItem = {
+  question: string;
+  answer: string;
+};
+
 interface ResultCardProps {
   answers: Answer[];
-  templateData: Answer[];
+  templateData: TemplateDataItem[];
   quizName: string;
 }
 
@@ -82,10 +87,11 @@ export function ResultsCard({
     behavior: "smooth",
   });
 
-  let quizHistory = JSON.parse(localStorage.getItem("quizHistory") || "[]");
+  const quizHistory = JSON.parse(localStorage?.getItem("quizHistory") || "[]");
   if (Array.isArray(quizHistory)) {
     quizHistory.push({
       time: Date.now(),
+      name: quizName,
       answers,
       templateData,
       correctCount,
@@ -108,9 +114,9 @@ export function ResultsCard({
               <DialogDescription>{quizName}</DialogDescription>
             </DialogHeader>
             <div>
-              <b>{parseFloat(correctPercentage.toFixed(2)) + "%"}</b>
+              <b>{parseFloat(correctPercentage.toFixed(2))}%</b>
               <br />
-              {correctCount + " / " + templateData.length}
+              {correctCount} / {templateData.length}
             </div>
           </div>
         </div>