UI assessments

src/app/(main)/assessment/form/AssessmentForm.tsx

@@ -0,0 +1,100 @@
+"use client";
+import { useState } from "react";
+import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/20/solid";
+import Header from "@/app/(main)/assessment/ui/Header";
+import RadioGroupItem from "@/components/inputs/RadioGroup/RadioGroupItem";
+import Button from "@/components/Button";
+import { quiz } from "@/app/(main)/assessment/QuizData";
+
+export default function AssessmentForm() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [selectedOption, setSelectedOption] = useState<string | null>(null);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const handleNext = () => {
+    if (!selectedOption) {
+      setErrorMessage("Select an option before moving onto the next question");
+      return;
+    }
+    setErrorMessage("");
+    if (currentIndex < quiz.length - 1) {
+      setCurrentIndex((prevIndex) => prevIndex + 1);
+      setSelectedOption(null);
+    }
+  };
+
+  const handlePrev = () => {
+    if (currentIndex > 0) {
+      setCurrentIndex(currentIndex - 1);
+    }
+  };
+
+  const currentQuestion = quiz[currentIndex];
+
+  return (
+    <div>
+      <Header />
+      <div
+        aria-label="question-container"
+        className="mb-[42px] mt-[80px] w-full max-w-[812px] gap-[24px] rounded-[16px] bg-[#F5F5F5] p-[40px]"
+      >
+        <p
+          aria-label="question"
+          className="mb-[32px] max-w-[650px] text-[25px] font-semibold leading-[30px] text-[#16171A]"
+        >
+          {currentQuestion.question}
+        </p>
+
+        <div
+          aria-label="radio-buttons"
+          className="flex w-[650px] flex-col justify-center gap-[24px]"
+        >
+          {["none", "beginner", "intermediate", "advanced"].map((level) => (
+            <RadioGroupItem
+              key={level}
+              className={`w-full gap-[16px] rounded-[8px] border p-[16px] shadow-md ${
+                selectedOption === level
+                  ? "border-[#217A56]"
+                  : "border-[#9CA1AA]"
+              }`}
+              id={level}
+              label={
+                <div>
+                  <strong>
+                    {level.charAt(0).toUpperCase() + level.slice(1)}
+                  </strong>
+                  <p>
+                    {currentQuestion[level as keyof typeof currentQuestion]}
+                  </p>
+                </div>
+              }
+              checked={selectedOption === level}
+              onChange={() => setSelectedOption(level)}
+            />
+          ))}
+        </div>
+
+        {errorMessage && <p className="mt-4 text-red-500">{errorMessage}</p>}
+      </div>
+
+      <div className="flex w-[386px] items-center justify-center gap-[40px]">
+        <Button
+          className="h-[60px] w-full rounded-[8px] border border-[#9CA1AA] !bg-[#F5F5F5]/70 px-[26px] py-[18px] text-black"
+          disabled={currentIndex === 0}
+          onClick={handlePrev}
+        >
+          <ArrowLeftIcon className="mr-2 h-4 w-4" />
+          Back
+        </Button>
+        <Button
+          className="h-[60px] w-full rounded-[8px] border border-[#9CA1AA] !bg-[#217A56] px-[26px] py-[18px] text-white"
+          disabled={currentIndex === quiz.length - 1}
+          onClick={handleNext}
+        >
+          Continue
+          <ArrowRightIcon className="ml-2 h-4 w-4 text-white" />
+        </Button>
+      </div>
+    </div>
+  );
+}

src/app/(main)/assessment/home/AssessmentPage.tsx

@@ -0,0 +1,93 @@
+import Image from "next/image";
+import Button from "@/components/Button";
+
+export default function AssessmentPage() {
+  return (
+    <div
+      aria-label="component-container"
+      className="left-[250px] mt-[76px] flex h-[547px] w-[1478px] flex-col items-center justify-center gap-[75px] px-[40px]"
+    >
+      <div
+        aria-label="header"
+        className="flex min-h-[200px] w-[1300px] min-w-[895px] flex-row items-center justify-center gap-[40px] rounded-[16px] text-2xl font-light"
+      >
+        <Image
+          src="/img/assessment/home.png"
+          alt="home"
+          width={231}
+          height={200}
+          className="h-[200px] w-[231px]"
+        />
+        <div
+          aria-label="header-intro"
+          className="flex flex-col items-start justify-center"
+        >
+          <p className="h-[40px] w-[700px] text-left text-[39px] leading-[40px]">
+            Hey there tech Wizard!
+          </p>
+          <p className="h-[72px] w-[700px] text-left text-[20px] font-medium leading-[24px] text-[#16171A]">
+            What&lsquo;s your tech superpower level? Are you a beginner Batman
+            or an expert Iron Man? Let us know so we can team you up with the
+            right sidekick.
+          </p>
+        </div>
+      </div>
+      <div
+        aria-label="tile-row"
+        className="flex h-[192px] w-[1398px] flex-row gap-[40px]"
+      >
+        <div
+          aria-label="tile"
+          className="flex h-[192px] w-[439px] flex-col items-center justify-center gap-[24px] rounded-[16px] bg-[#F5F5F5] p-[24px]"
+        >
+          <p
+            aria-label="tile-name"
+            className="h-[30px] w-[283px] text-center text-[25px] font-semibold leading-[30px]"
+          >
+            Front End Development
+          </p>
+          <p className="h-[19px] w-[8px] text-center text-[16px] font-medium leading-[19px] text-[#000000]">
+            -
+          </p>
+          <Button className="h-[47px] w-[207px] gap-[8px] rounded-lg bg-[#217A56] px-[22px] py-[14px] text-[16px] font-semibold leading-[19px] text-[#F5F5F5]">
+            Take Assessment
+          </Button>
+        </div>
+        <div
+          aria-label="tile"
+          className="flex h-[192px] w-[439.33px] flex-col items-center justify-center gap-[24px] rounded-[16px] bg-[#F5F5F5] p-[24px]"
+        >
+          <p
+            aria-label="tile-name"
+            className="h-[30px] w-[283px] text-center text-[25px] font-semibold leading-[30px]"
+          >
+            Back End Development
+          </p>
+          <p className="h-[19px] w-[8px] text-center text-[16px] font-medium leading-[19px] text-[#000000]">
+            -
+          </p>
+          <Button className="h-[47px] w-[207px] gap-[8px] rounded-lg bg-[#217A56] px-[22px] py-[14px] text-[16px] font-semibold leading-[19px] text-[#F5F5F5]">
+            Take Assessment
+          </Button>
+        </div>
+        <div
+          aria-label="tile"
+          className="flex h-[192px] w-[439.33px] flex-col items-center justify-center gap-[24px] rounded-[16px] bg-[#E3E5EB] p-[24px]"
+        >
+          <p
+            aria-label="tile-name"
+            className="h-[30px] w-[283px] text-center text-[25px] font-semibold leading-[30px]"
+          >
+            UX Design
+          </p>
+          <p className="h-[19px] w-[8px] text-center text-[16px] font-medium leading-[19px] text-[#000000]">
+            -
+          </p>
+          <Button className="h-[47px] w-[207px] gap-[8px] rounded-lg bg-[#217A56] px-[22px] py-[14px] text-[16px] font-semibold leading-[19px] text-[#F5F5F5]">
+            Coming Soon
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(main)/assessment/page.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+// import AssessmentResults from "@/app/(main)/assessment/results/AssessmentResults";
+import AssessmentForm from "@/app/(main)/assessment/form/AssessmentForm";
+// import AssessmentPage from "@/app/(main)/assessment/home/AssessmentPage";
+
+export default function AssessmentDashboard() {
+  return (
+    <div>
+      {/* <AssessmentResults /> */}
+      <AssessmentForm />
+      {/* <AssessmentPage /> */}
+    </div>
+  );
+}

src/app/(main)/assessment/results/AssessmentResults.tsx

@@ -0,0 +1,33 @@
+"use client";
+import { useEffect, useState } from "react";
+import TierDisplay from "@/app/(main)/assessment/ui/TierDisplay";
+import ButtonsController from "@/app/(main)/assessment/ui/ButtonsController";
+import ConfettiScreen from "@/app/(main)/assessment/ui/ConfettiScreen";
+import ResultsLoading from "@/app/(main)/assessment/ui/ResultsLoading";
+
+export default function AssessmentResultsPage() {
+  const [showLoading, setShowLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setShowLoading(false), 5000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div className="absolute left-[581px] top-[354px] flex h-[480px] w-[814px] flex-col items-center justify-center gap-[42px]">
+      {showLoading ? (
+        <ResultsLoading />
+      ) : (
+        <>
+          <ConfettiScreen className="absolute inset-0" />
+          <div className="flex h-[90px] w-[650px] max-w-[650px] items-center justify-center text-center text-[25px] font-semibold leading-[30px] tracking-normal text-[#16171A]">
+            After analyzing your results, <br />
+            We&apos;ve concluded that you are a ... <br />
+          </div>
+          <TierDisplay />
+          <ButtonsController />
+        </>
+      )}
+    </div>
+  );
+}

src/app/(main)/assessment/ui/AssessmentStepper.tsx

@@ -0,0 +1,53 @@
+import { Stepper } from "@chingu-x/components/stepper";
+import type { SteppersItem } from "@/components/Stepper";
+
+interface AssessmentStepperProps {
+  currentStep: number;
+  goToStep: (step: number) => void;
+  className: string;
+}
+
+export default function AssessmentStepper({
+  currentStep,
+  goToStep,
+  className = "",
+}: AssessmentStepperProps) {
+  const totalQuestions = 60;
+  const questionsPerStep = 6;
+  const totalSteps = totalQuestions / questionsPerStep;
+
+  function getStatus(
+    stepId: number,
+    currentStep: number,
+  ): "completed" | "current" | "remaining" {
+    if (stepId < currentStep) return "completed";
+    if (stepId > currentStep) return "remaining";
+    return "current";
+  }
+
+  const steppers: SteppersItem[] = Array.from(
+    { length: totalSteps },
+    (_, i) => {
+      const stepNumber = i + 1;
+      const stepQuestionIndex =
+        stepNumber * questionsPerStep - (questionsPerStep - 1);
+
+      return {
+        isActive: currentStep === stepQuestionIndex,
+        name: `Page ${stepNumber}`,
+        onClickEvent: () => goToStep(stepQuestionIndex),
+        status: getStatus(stepQuestionIndex, currentStep),
+      };
+    },
+  );
+
+  const showStepper = steppers.some((step) => step.isActive);
+
+  if (!showStepper) return null;
+
+  return (
+    <div className={`flex justify-center text-black ${className || ""}`}>
+      <Stepper styleType="chips" stepperWidth="w-fit" steppers={steppers} />
+    </div>
+  );
+}

src/app/(main)/assessment/ui/ButtonsController.tsx

@@ -0,0 +1,29 @@
+import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/20/solid";
+import Link from "next/link";
+import Button from "@/components/Button";
+import QuizButton from "@/app/(main)/assessment/ui/QuizButton";
+// import VoyagePageButton from "@/components/sidebar/VoyagePageButton";
+
+export default function ButtonsController() {
+  return (
+    <div className="h-[150px] w-full max-w-[814px] gap-[30px]">
+      <Link href="/assessment/form">
+        <QuizButton />
+      </Link>
+      <div className="flex w-full items-center justify-center gap-[42px] rounded-tl-[16px] pt-[40px]">
+        <Link href="/assessment/home">
+          <Button className="w-full gap-[8px] border-[#217A56] !bg-[#F5F5F5] px-[26px] py-[18px] text-[20px] font-semibold text-black">
+            <ArrowLeftIcon className="mr-2 h-4 w-4" />
+            Back to Self Assessment Page
+          </Button>
+        </Link>
+        <Link href="/prevoyage">
+          <Button className="w-full gap-[8px] !bg-[#217A56] px-[26px] py-[18px] text-[20px] font-semibold">
+            Join an Upcoming Voyage
+            <ArrowRightIcon className="ml-2 h-4 w-4 text-white" />
+          </Button>
+        </Link>
+      </div>
+    </div>
+  );
+}

src/app/(main)/assessment/ui/ConfettiScreen.tsx

@@ -0,0 +1,16 @@
+"use client";
+import dynamic from "next/dynamic";
+import confettiAnimation from "@/public/lotties/assessment_confetti.json";
+
+const Lottie = dynamic(() => import("lottie-react"), { ssr: false });
+interface ConfettiScreenProps {
+  className: string;
+}
+
+export default function ConfettiScreen({ className }: ConfettiScreenProps) {
+  return (
+    <div className={`h-full w-full ${className}`}>
+      <Lottie animationData={confettiAnimation} loop={false} />
+    </div>
+  );
+}

src/app/(main)/assessment/ui/Header.tsx

@@ -0,0 +1,26 @@
+import { useState } from "react";
+import Button from "@/components/Button";
+import AssessmentStepper from "@/app/(main)/assessment/ui/AssessmentStepper";
+
+export default function Header() {
+  const [currentStep, setCurrentStep] = useState(1);
+
+  const goToStep = (step: number) => {
+    setCurrentStep(step);
+  };
+
+  return (
+    <div className="absolute left-0 top-0 flex w-full items-center justify-between gap-2 px-[24px]">
+      <Button variant="outline" className="whitespace-nowrap">
+        Exit Assessment
+      </Button>
+
+      <AssessmentStepper
+        className="flex h-[80px] items-center justify-center"
+        currentStep={currentStep}
+        goToStep={goToStep}
+      />
+      <div className="text-sm text-neutral">Last saved 4 minutes ago</div>
+    </div>
+  );
+}

src/app/(main)/assessment/ui/QuizButton.tsx

@@ -0,0 +1,9 @@
+import Button from "@/components/Button";
+
+export default function QuizButton() {
+  return (
+    <Button className="flex w-full items-center justify-center gap-[8px] rounded-[8px] bg-[#A3CEE9] px-[26px] py-[18px] text-[20px] text-black">
+      Retake Quiz
+    </Button>
+  );
+}