Merge pull request #475 from bounswe/FRONTEND-454

Frontend-454 Developed Quiz Solving Pages
bounswe · Nov 5, 2024 · 7aa8146 · 7aa8146
2 parents 73676f6 + 1142a45
commit 7aa8146
Show file tree

Hide file tree

Showing 3 changed files with 274 additions and 1 deletion.
diff --git a/frontend/src/components/quiz/navigation.tsx 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
@@ -0,0 +1,102 @@
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  Divider,
+  Button,
+} from "@nextui-org/react";
+
+type Props = {
+  ques_count: number;
+  cur_question: number;
+  answers: Answer[];
+  setAnswers: (answers: Answer[]) => void;
+};
+enum Answer {
+  None,
+  A,
+  B,
+  C,
+  D,
+}
+
+export default function App({
+  ques_count,
+  cur_question,
+  answers,
+  setAnswers,
+}: Props) {
+  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
@@ -1,10 +1,78 @@
+import { Pagination, Button } from "@nextui-org/react";
 import Navbar from "../components/common/navbar.tsx";
+import QuestionCard from "../components/quiz/question-card.tsx";
+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 />
-      <h1>Quizzes</h1>
+
+      <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>
+      </SidebarLayout>
     </div>
   );
 }
+