First commit

app/(protected)/practice/[slug]/page.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import ProgressBar from "@/components/ProgressBar";
+import { getPracticeBySlug, mockPracticeModules } from "@/lib/data/mockPractice";
+
+export default function PracticeExercisePage() {
+  const params = useParams<{ slug: string }>();
+  const practiceModule = getPracticeBySlug(params.slug);
+
+  const [index, setIndex] = useState(0);
+  const [score, setScore] = useState(0);
+  const [finished, setFinished] = useState(false);
+  const [selected, setSelected] = useState<number | null>(null);
+
+  if (!practiceModule) {
+    return (
+      <div className="acve-panel p-6">
+        <h1 className="text-2xl font-bold text-slate-900">Practice module not found</h1>
+        <p className="mt-2 text-slate-600">The requested practice slug does not exist in mock data.</p>
+        <Link className="acve-button-primary mt-4 inline-flex px-4 py-2 text-sm font-semibold" href="/practice">
+          Back to practice
+        </Link>
+      </div>
+    );
+  }
+
+  if (!practiceModule.isInteractive || !practiceModule.questions?.length) {
+    return (
+      <div className="acve-panel p-6">
+        <h1 className="text-2xl font-bold text-slate-900">{practiceModule.title}</h1>
+        <p className="mt-2 text-slate-600">This practice module is scaffolded and will be enabled in a later iteration.</p>
+      </div>
+    );
+  }
+
+  const total = practiceModule.questions.length;
+  const current = practiceModule.questions[index];
+  const progress = Math.round((index / total) * 100);
+
+  const pick = (choiceIndex: number) => {
+    if (selected !== null) return;
+    setSelected(choiceIndex);
+    if (choiceIndex === current.answerIndex) {
+      setScore((value) => value + 1);
+    }
+  };
+
+  const next = () => {
+    if (index + 1 >= total) {
+      setFinished(true);
+      return;
+    }
+    setIndex((value) => value + 1);
+    setSelected(null);
+  };
+
+  const restart = () => {
+    setIndex(0);
+    setScore(0);
+    setSelected(null);
+    setFinished(false);
+  };
+
+  if (finished) {
+    return (
+      <div className="mx-auto max-w-3xl rounded-2xl border border-slate-300 bg-white p-8 text-center shadow-sm">
+        <h1 className="acve-heading text-5xl">Exercise complete</h1>
+        <p className="mt-2 text-3xl text-slate-700">
+          Final score: {score}/{total}
+        </p>
+        <button className="acve-button-primary mt-6 px-6 py-2 text-lg font-semibold hover:brightness-105" onClick={restart} type="button">
+          Restart
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <section className="text-center">
+        <p className="acve-pill mx-auto mb-4 w-fit">Practice and Exercises</p>
+        <h1 className="acve-heading text-4xl md:text-6xl">Master Your Skills</h1>
+      </section>
+
+      <section className="grid gap-4 md:grid-cols-3">
+        {mockPracticeModules.map((module, moduleIndex) => {
+          const isActive = module.slug === practiceModule.slug;
+          return (
+            <div
+              key={module.slug}
+              className={`rounded-2xl border p-6 ${
+                isActive ? "border-brand bg-white shadow-sm" : "border-slate-300 bg-white"
+              }`}
+            >
+              <div className="mb-2 text-3xl text-brand md:text-4xl">{moduleIndex === 0 ? "A/" : moduleIndex === 1 ? "[]" : "O"}</div>
+              <h2 className="text-2xl text-[#222a38] md:text-4xl">{module.title}</h2>
+              <p className="mt-2 text-lg text-slate-600 md:text-2xl">{module.description}</p>
+            </div>
+          );
+        })}
+      </section>
+
+      <section className="acve-panel p-4">
+        <div className="mb-3 flex items-center justify-between gap-4">
+          <p className="text-xl font-semibold text-slate-700">
+            Question {index + 1} / {total}
+          </p>
+          <p className="text-xl font-semibold text-[#222a38] md:text-2xl">Score: {score}/{total}</p>
+        </div>
+        <ProgressBar value={progress} />
+      </section>
+
+      <section className="acve-panel p-6">
+        <div className="rounded-2xl bg-[#f6f6f8] px-6 py-10 text-center">
+          <p className="text-lg text-slate-500 md:text-2xl">Spanish Term</p>
+          <h2 className="acve-heading mt-2 text-3xl md:text-6xl">{current.prompt.replace("Spanish term: ", "")}</h2>
+        </div>
+
+        <div className="mt-6 grid gap-3">
+          {current.choices.map((choice, choiceIndex) => {
+            const isPicked = selected === choiceIndex;
+            const isCorrect = choiceIndex === current.answerIndex;
+            const stateClass =
+              selected === null
+                ? "border-slate-300 hover:bg-slate-50"
+                : isCorrect
+                  ? "border-[#2f9d73] bg-[#edf9f4]"
+                  : isPicked
+                    ? "border-[#bf3c5f] bg-[#fff1f4]"
+                    : "border-slate-300";
+
+            return (
+              <button
+                key={choice}
+                className={`rounded-xl border px-4 py-3 text-left text-base text-slate-800 md:text-xl ${stateClass}`}
+                onClick={() => pick(choiceIndex)}
+                type="button"
+              >
+                {choice}
+              </button>
+            );
+          })}
+        </div>
+
+        <button
+          className="acve-button-primary mt-6 px-6 py-2 text-lg font-semibold hover:brightness-105 disabled:opacity-50"
+          disabled={selected === null}
+          onClick={next}
+          type="button"
+        >
+          {index + 1 === total ? "Finish" : "Next question"}
+        </button>
+      </section>
+    </div>
+  );
+}