countdown wip

README.md

@@ -1,5 +1,5 @@
 ---
-title: Guess The Image
+title: — guess the image —
 emoji: 🤯
 colorFrom: blue
 colorTo: green

components/quizz/index.tsx

@@ -1,18 +1,43 @@
 "use client";
+import { useEffect, useState } from "react";
+import { RxLapTimer } from "react-icons/rx";
 
 import { useQuizz } from "./hooks/useQuizz";
 import { PromptType } from "@/utils/type";
 import { Card } from "./card";
+import { useUpdateEffect } from "react-use";
 
 export const QuizzContent = () => {
   const { loading, prompts, question } = useQuizz();
+  const [counter, setCounter] = useState(10);
+
+  // TODO: use useInterval hook + stop counter when result or when user click on a card
+  // trigger an aumatic cancel when the counter is done
+
+  useEffect(() => {
+    if (!counter) {
+      console.log("counter end");
+      return;
+    }
+    const timer =
+      counter > 0 && setInterval(() => setCounter(counter - 1), 1000);
+    return () => clearInterval(timer || 0);
+  }, [counter]);
+
+  useUpdateEffect(() => {
+    setCounter(10);
+  }, [question]);
 
   return (
     <div className="flex flex-col-reverse lg:flex-col items-center justify-center gap-10 lg:gap-12">
       <div className="grid grid-cols-1 gap-0 lg:gap-12">
-        <p className="text-white font-normal text-lg lg:text-2xl text-center">
+        <p className="text-white font-normal text-lg lg:text-2xl text-center mb-5 lg:mb-0">
           Guess which image is related to the prompt above
         </p>
+        <p className="text-white text-center text-3xl font-extrabold max-w-max mx-auto flex items-center justify-between gap-4 relative">
+          <RxLapTimer className="inline-block mb-4 lg:mb-2 text-3xl lg:text-4xl" />
+          {counter}
+        </p>
         <div className="flex flex-col lg:flex-row items-center justify-center gap-0 lg:gap-16">
           {loading
             ? Array.from({ length: 3 }).map((_, i: number) => (