From b751736b0bb7c3e77c0f9d67511be7783d47360f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ali=20Tar=C4=B1k=20=C5=9Eahin?= <alitariksah@gmail.com>
Date: Mon, 4 Nov 2024 23:35:50 +0300
Subject: [PATCH 1/2] feat(frontend): created quiz viewing page and related
 components

---
 .../src/components/quiz/question-card.tsx     | 98 +++++++++++++++++++
 frontend/src/pages/quizzes.tsx                | 45 ++++++++-
 2 files changed, 142 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/quiz/question-card.tsx

diff --git a/frontend/src/components/quiz/question-card.tsx b/frontend/src/components/quiz/question-card.tsx
new file mode 100644
index 00000000..980c57bb
--- /dev/null
+++ b/frontend/src/components/quiz/question-card.tsx
@@ -0,0 +1,98 @@
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  Divider,
+  Button,
+} from "@nextui-org/react";
+import { useState } from "react";
+
+type Props = {
+  ques_count: number;
+  cur_question: number;
+};
+enum Answer {
+  None,
+  A,
+  B,
+  C,
+  D,
+}
+
+export default function App({ ques_count, cur_question }: Props) {
+  const [answers, setAnswers] = useState(Array(ques_count).fill(Answer.None));
+
+  function handleClick(answer: Answer) {
+    return () => {
+      setAnswers((prev) => {
+        const newAnswers = [...prev];
+        if (newAnswers[cur_question - 1] === answer) {
+          newAnswers[cur_question - 1] = Answer.None;
+        } else {
+          newAnswers[cur_question - 1] = answer;
+        }
+        return newAnswers;
+      });
+    };
+  }
+
+  return (
+    <Card className="max-w-[600px]">
+      <CardHeader className="flex flex-row justify-center w-full items-center gap-3">
+        <p className="text-md text-center items-center border border-gray-300 rounded-lg p-1 px-3">
+          {cur_question} / {ques_count}
+        </p>
+      </CardHeader>
+      <Divider />
+      <CardBody className="flex flex-col justify-center shadow-lg rounded-lg shadow-zinc-200 w-[550px] h-[200px]">
+        <p className="text-center text-5xl text-blue-900">Lamb</p>
+      </CardBody>
+
+      <CardFooter className="w-[550px] h-[170px] py-6">
+        <div className="grid grid-cols-2 grid-rows-2 gap-4 w-full h-full">
+          <Button
+            color="primary"
+            onClick={handleClick(Answer.A)}
+            variant={
+              answers[cur_question - 1] === Answer.A ? "solid" : "bordered"
+            }
+            className=" flex items-center justify-center text-xl h-12 mx-3"
+          >
+            Kuzu
+          </Button>
+          <Button
+            color="primary"
+            onClick={handleClick(Answer.B)}
+            variant={
+              answers[cur_question - 1] === Answer.B ? "solid" : "bordered"
+            }
+            className=" flex items-center justify-center text-xl h-12 mx-3"
+          >
+            Lamba
+          </Button>
+          <Button
+            color="primary"
+            onClick={handleClick(Answer.C)}
+            variant={
+              answers[cur_question - 1] === Answer.C ? "solid" : "bordered"
+            }
+            className=" flex items-center justify-center text-xl h-12 mx-3"
+          >
+            Koç
+          </Button>
+          <Button
+            color="primary"
+            onClick={handleClick(Answer.D)}
+            variant={
+              answers[cur_question - 1] === Answer.D ? "solid" : "bordered"
+            }
+            className=" flex items-center justify-center text-xl h-12 mx-3"
+          >
+            Işık
+          </Button>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/frontend/src/pages/quizzes.tsx b/frontend/src/pages/quizzes.tsx
index 858feb2f..16aa9a65 100644
--- a/frontend/src/pages/quizzes.tsx
+++ b/frontend/src/pages/quizzes.tsx
@@ -1,10 +1,53 @@
+import { Pagination, Button } from "@nextui-org/react";
 import Navbar from "../components/common/navbar.tsx";
+import QuestionCard from "../components/quiz/question-card.tsx";
+import React from "react";
 
 export default function Quizzes() {
+  const [currentPage, setCurrentPage] = React.useState(1);
+
   return (
     <div className="h-screen w-screen flex flex-col">
       <Navbar />
-      <h1>Quizzes</h1>
+      <div className="flex flex-col items-center overflow-hidden">
+        <h1 className="font-semibold text-4xl mt-3 mb-1 text-blue-900">
+          Daily Words
+        </h1>
+        <div className="flex flex-col items-center py-4">
+          <QuestionCard ques_count={10} cur_question={currentPage} />
+        </div>
+        <div className="flex justify-center items-center gap-6 my-1">
+          <Button
+            size="lg"
+            variant="flat"
+            color="primary"
+            {...(currentPage === 1 && { disabled: true })}
+            onPress={() =>
+              setCurrentPage((prev) => (prev > 1 ? prev - 1 : prev))
+            }
+          >
+            Previous
+          </Button>
+          <Pagination
+            total={10}
+            color="primary"
+            page={currentPage}
+            onChange={setCurrentPage}
+          />
+          <Button
+            size="lg"
+            variant="flat"
+            color="primary"
+            {...(currentPage === 10 && { disabled: true })}
+            onPress={() =>
+              setCurrentPage((prev) => (prev < 10 ? prev + 1 : prev))
+            }
+          >
+            Next
+          </Button>
+        </div>
+      </div>
     </div>
   );
 }
+

From 9788ede63febd4101c82e5aa52a6184631495288 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ali=20Tar=C4=B1k=20=C5=9Eahin?= <alitariksah@gmail.com>
Date: Tue, 5 Nov 2024 03:14:23 +0300
Subject: [PATCH 2/2] feat(frontend): added quiz navigation section

---
 frontend/src/components/quiz/navigation.tsx   | 103 ++++++++++++++++++
 .../src/components/quiz/question-card.tsx     |  12 +-
 frontend/src/pages/quizzes.tsx                | 101 ++++++++++-------
 3 files changed, 174 insertions(+), 42 deletions(-)
 create mode 100644 frontend/src/components/quiz/navigation.tsx

diff --git a/frontend/src/components/quiz/navigation.tsx b/frontend/src/components/quiz/navigation.tsx
new file mode 100644
index 00000000..f6a0e260
--- /dev/null
+++ b/frontend/src/components/quiz/navigation.tsx
@@ -0,0 +1,103 @@
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  Divider,
+  Button,
+} from "@nextui-org/react";
+
+enum Answer {
+  None,
+  A,
+  B,
+  C,
+  D,
+}
+
+const SidebarLayout = ({
+  cur_question,
+  setCurrentPage,
+  answers,
+  isOpen,
+  toggleSidebar,
+  children,
+}) => {
+  const sidebarClasses = `fixed top-32 right-0 w-[15vw] h-96 transition-transform duration-500 ease-in-out transform ${
+    isOpen ? "translate-x-0" : "translate-x-full"
+  }`;
+
+  const buttonClasses = `fixed top-40 transition-transform duration-500 ease-in-out transform ${
+    isOpen ? "translate-x-[-15vw] " : "translate-x-0"
+  } right-4 z-20 flex items-center  justify-center w-12 h-12 bg-white rounded-full hover:scale-110 focus:scale-100 shadow-xl`;
+
+  const contentClasses = `ml-0 transition-all duration-500 ease-in-out ${
+    isOpen ? "mr-[15vw]" : ""
+  }`;
+
+  return (
+    <div className="relative overflow-hidden">
+      {/* Sidebar */}
+      <div className={sidebarClasses}>
+        <Card className="max-w-[400px]">
+          <CardHeader className="flex gap-3 text-center">
+            <h1 className="text-center w-full text-lg text-blue-900 font-semibold">
+              Quiz Navigation
+            </h1>
+          </CardHeader>
+          <Divider />
+          <CardBody>
+            <div className="grid grid-cols-4 gap-4">
+              {Array.from(answers).map((_, index) => (
+                <Button
+                  isIconOnly
+                  key={index}
+                  color={answers[index] === Answer.None ? "default" : "primary"}
+                  variant={cur_question === index + 1 ? "solid" : "flat"}
+                  onClick={() => setCurrentPage(index + 1)}
+                >
+                  {index + 1}
+                </Button>
+              ))}
+            </div>
+          </CardBody>
+          <Divider />
+          <CardFooter className="flex items-center justify-center">
+            <Button color="primary" variant="solid" className="items-center">
+              Finish Quiz
+            </Button>
+          </CardFooter>
+        </Card>
+      </div>
+
+      {/* Toggle Button */}
+      <button
+        onClick={toggleSidebar}
+        aria-label={isOpen ? "Close menu" : "Open menu"}
+        className={buttonClasses}
+      >
+        <svg
+          className={`w-6 h-6 text-blue-500 transition-transform duration-500 ease-in-out transform ${
+            isOpen ? "rotate-180 " : "rotate-0"
+          }`}
+          fill="none"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+          stroke="currentColor"
+        >
+          <path
+            d="M15 19l-7-7 7-7"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+
+      {/* Main Content */}
+      <div className={contentClasses}>{children}</div>
+    </div>
+  );
+};
+
+export default SidebarLayout;
diff --git a/frontend/src/components/quiz/question-card.tsx b/frontend/src/components/quiz/question-card.tsx
index 980c57bb..1d4b36f4 100644
--- a/frontend/src/components/quiz/question-card.tsx
+++ b/frontend/src/components/quiz/question-card.tsx
@@ -6,11 +6,12 @@ import {
   Divider,
   Button,
 } from "@nextui-org/react";
-import { useState } from "react";
 
 type Props = {
   ques_count: number;
   cur_question: number;
+  answers: Answer[];
+  setAnswers: (answers: Answer[]) => void;
 };
 enum Answer {
   None,
@@ -20,9 +21,12 @@ enum Answer {
   D,
 }
 
-export default function App({ ques_count, cur_question }: Props) {
-  const [answers, setAnswers] = useState(Array(ques_count).fill(Answer.None));
-
+export default function App({
+  ques_count,
+  cur_question,
+  answers,
+  setAnswers,
+}: Props) {
   function handleClick(answer: Answer) {
     return () => {
       setAnswers((prev) => {
diff --git a/frontend/src/pages/quizzes.tsx b/frontend/src/pages/quizzes.tsx
index 16aa9a65..7c326ae2 100644
--- a/frontend/src/pages/quizzes.tsx
+++ b/frontend/src/pages/quizzes.tsx
@@ -1,52 +1,77 @@
 import { Pagination, Button } from "@nextui-org/react";
 import Navbar from "../components/common/navbar.tsx";
 import QuestionCard from "../components/quiz/question-card.tsx";
-import React from "react";
+import React, { useState } from "react";
+import SidebarLayout from "../components/quiz/navigation.tsx";
+
+enum Answer {
+  None,
+  A,
+  B,
+  C,
+  D,
+}
 
 export default function Quizzes() {
   const [currentPage, setCurrentPage] = React.useState(1);
+  const [answers, setAnswers] = useState(Array(10).fill(Answer.None));
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleSidebar = () => {
+    setIsOpen(!isOpen);
+  };
 
   return (
     <div className="h-screen w-screen flex flex-col">
       <Navbar />
-      <div className="flex flex-col items-center overflow-hidden">
-        <h1 className="font-semibold text-4xl mt-3 mb-1 text-blue-900">
-          Daily Words
-        </h1>
-        <div className="flex flex-col items-center py-4">
-          <QuestionCard ques_count={10} cur_question={currentPage} />
-        </div>
-        <div className="flex justify-center items-center gap-6 my-1">
-          <Button
-            size="lg"
-            variant="flat"
-            color="primary"
-            {...(currentPage === 1 && { disabled: true })}
-            onPress={() =>
-              setCurrentPage((prev) => (prev > 1 ? prev - 1 : prev))
-            }
-          >
-            Previous
-          </Button>
-          <Pagination
-            total={10}
-            color="primary"
-            page={currentPage}
-            onChange={setCurrentPage}
-          />
-          <Button
-            size="lg"
-            variant="flat"
-            color="primary"
-            {...(currentPage === 10 && { disabled: true })}
-            onPress={() =>
-              setCurrentPage((prev) => (prev < 10 ? prev + 1 : prev))
-            }
-          >
-            Next
-          </Button>
+
+      <SidebarLayout
+        cur_question={currentPage}
+        setCurrentPage={setCurrentPage}
+        answers={answers}
+        isOpen={isOpen}
+        toggleSidebar={toggleSidebar}
+      >
+        <div className="flex flex-col items-center overflow-hidden">
+          <h1 className="font-semibold text-4xl mt-3 mb-1 text-blue-900">
+            Daily Words
+          </h1>
+          <div className="flex flex-col items-center py-4">
+            <QuestionCard
+              ques_count={10}
+              answers={answers}
+              setAnswers={setAnswers}
+              cur_question={currentPage}
+            />
+          </div>
+          <div className="flex justify-center items-center gap-24 my-1">
+            <Button
+              size="lg"
+              variant="flat"
+              color="primary"
+              {...(currentPage === 1 && { disabled: true })}
+              onPress={() =>
+                setCurrentPage((prev) => (prev > 1 ? prev - 1 : prev))
+              }
+              className="w-32"
+            >
+              Previous
+            </Button>
+            <Button
+              size="lg"
+              variant="flat"
+              color="primary"
+              {...(currentPage === 10 && { disabled: true })}
+              onPress={() =>
+                setCurrentPage((prev) => (prev < 10 ? prev + 1 : prev))
+              }
+              className="w-32"
+            >
+              Next
+            </Button>
+          </div>
         </div>
-      </div>
+      </SidebarLayout>
     </div>
   );
 }