wip: guide and results subpages with mockup content introduec

apps/web/app/[lang]/otazka/page.tsx

@@ -22,7 +22,7 @@ type Steps = {
 export default function Page() {
   const [questions, setQuestions] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
-  const [currentQuestion, setCurrentQuestion] = useState(1);
+  const [currentQuestion, setCurrentQuestion] = useState(0);
   // steps for progress bar
   const [steps, setSteps] = useState<Steps>({
     answers: [],
@@ -33,7 +33,6 @@ export default function Page() {
   function handleClick(button: string) {
     switch (button) {
       case "inFavour":
-        setCurrentQuestion((prevState) => prevState + 1);
         // fix glitch, styling of the status bar should be permanent
         setSteps((prevSteps) => {
           const updatedAnswer = prevSteps.answers.map((answer, index) => {
@@ -45,9 +44,9 @@ export default function Page() {
 
           return { ...prevSteps, answers: updatedAnswer };
         });
+        setCurrentQuestion((prevState) => prevState + 1);
         break;
       case "against":
-        setCurrentQuestion((prevState) => prevState + 1);
         setSteps((prevSteps) => {
           const updatedAnswer = prevSteps.answers.map((answer, index) => {
             if (index === currentQuestion - 1) {
@@ -58,6 +57,7 @@ export default function Page() {
 
           return { ...prevSteps, answers: updatedAnswer };
         });
+        setCurrentQuestion((prevState) => prevState + 1);
         break;
       case "prev":
         setCurrentQuestion((prevState) => prevState - 1);
@@ -66,18 +66,19 @@ export default function Page() {
           currentQuestion: currentQuestion,
         });
         break;
-      // fix button naming  and args to "skip"
+      // fix button naming  and args to "skip" and null set
       case "next":
         setCurrentQuestion((prevState) => prevState + 1);
-        setSteps((prevSteps) => {
-          const updatedAnswer = prevSteps.answers.map((answer, index) => {
-            if (index === currentQuestion - 1) {
-              return { ...answer, status: null };
-            }
-            return answer;
-          });
-
-          return { ...prevSteps, answers: updatedAnswer };
+        setSteps({
+          ...steps,
+          currentQuestion: currentQuestion,
+        });
+        break;
+      case "guide":
+        setCurrentQuestion((prevState) => prevState + 1);
+        setSteps({
+          ...steps,
+          currentQuestion: currentQuestion,
         });
         break;
     }
@@ -115,7 +116,13 @@ export default function Page() {
 
   return (
     <div className="flex flex-col justify-center self-end">
-      {isLoading && <Spinner />}
+      {currentQuestion === 0 ? <QuestionGuide onClick={handleClick} /> : null}
+      {/* // fix glitch beginning */}
+      {currentQuestion > questions.length && currentQuestion !== 0 ? (
+        <QuestionResults />
+      ) : null}
+      {/* loader needed? */}
+      {/* {isLoading && <Spinner />} */}
       {/* find better approach than map */}
       {questions.map((question: Question, index) => {
         const questionNumber = index + 1;
@@ -131,8 +138,10 @@ export default function Page() {
           );
         }
       })}
-
-      <ClientBottomBar onClick={handleClick} steps={steps} />
+      {/* Bottom bar */}
+      {currentQuestion <= questions.length && currentQuestion > 0 ? (
+        <ClientBottomBar onClick={handleClick} steps={steps} />
+      ) : null}
     </div>
   );
 }

packages/design-system/src/ui/questionCard/questionGuide.tsx

@@ -1,3 +1,35 @@
-export function QuestionGuide() {
-  return <h1>Question guide</h1>;
+import { Button } from "@repo/design-system/ui";
+
+type Props = {
+  onClick: (button: ButtonType) => void;
+};
+
+export function QuestionGuide({ onClick }: Props) {
+  return (
+    <>
+      <div className="k1-flex k1-w-full k1-flex-col k1-items-center">
+        <span className="k1-font-primary k1-text-2xl k1-font-bold k1-tracking-tight k1-text-neutral-strong">
+          Krajské volby
+          <span className="k1-text-base k1-text-neutral">
+            Jihomoravský kraj
+          </span>
+        </span>
+        <p className="k1-font-primary k1-text-base">
+          Vítejte ve Volební kalkulačce pro krajské volby 2024 pro Jihomoravský
+          kraj. Čeká vás 25 otázek. Stejné otázky dostaly všechny kandidující
+          strany. Zodpovězení otázek zabere zhruba 10 minut a na konci se
+          dozvíte, jak se jednotlivé strany shodují s vašimi názory.
+        </p>
+        <p className="k1-font-primary k1-text-base">
+          Oslovili jsme všechny strany bez výjimky. Pokud se některá neobjeví ve
+          výsledcích, je to proto, že (zatím) neposlala svoje odpovědi.
+        </p>
+      </div>
+      <div>
+        <Button kind="link" onClick={() => onClick("guide")}>
+          Přeskočit návod ▶▶
+        </Button>
+      </div>
+    </>
+  );
 }

packages/design-system/src/ui/questionCard/questionResults.tsx

@@ -1,3 +1,3 @@
 export function QuestionResults() {
-  return <h1>Question results</h1>;
+  return <h1>Rekapitulace</h1>;
 }