✨ show wich is the right answer

h-campos · Apr 26, 2023 · c436eb7 · c436eb7
1 parent 9714892
commit c436eb7
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 8 deletions.
diff --git a/src/components/Answer/Answer.tsx b/src/components/Answer/Answer.tsx
@@ -1,30 +1,53 @@
 //Librairies
-import { FC } from 'react'
+import { FC, useEffect, useState } from 'react'
 
 //Store
 import { useAnswerStore } from '../../hooks/useAnswer/useAnswer'
+import { useStatusStore } from '../../hooks/useStatus'
 
 type AnswerProps = {
   answer: string
+  rightAnswer: string
 }
 
-export const Answer: FC<AnswerProps> = ({ answer }) => {
+export const Answer: FC<AnswerProps> = ({ answer, rightAnswer }) => {
   const setAnswer = useAnswerStore((state) => state.setAnswer)
+  const status = useStatusStore((state) => state.status)
+  const [styleInput, setStyleInput] = useState<string>(
+    'inline-flex items-center justify-between rounded-md w-full h-full border-2 text-white peer-checked:border-blue-400 cursor-pointer peer-checked:text-blue-400'
+  )
+  const [styleContainer, setStyleContainer] = useState<string>(
+    'bg-zinc-500 h-16 rounded-md'
+  )
+
+  useEffect(() => {
+    if (status !== 'notSet') {
+      if (answer === rightAnswer) {
+        setStyleInput(
+          'inline-flex items-center justify-between rounded-md w-full h-full border-green-500 border-2 text-white cursor-pointer'
+        )
+        setStyleContainer('bg-green-400 h-16 rounded-md')
+      } else {
+        setStyleInput(
+          'inline-flex items-center justify-between rounded-md w-full h-full border-red-500 border-2 text-white cursor-pointer'
+        )
+        setStyleContainer('bg-red-400 h-16 rounded-md')
+      }
+    }
+  }, [status])
 
   return (
-    <div className='bg-zinc-500 h-16 rounded-md'>
+    <div className={styleContainer}>
       <input
         type='checkbox'
         id={answer}
+        disabled={status !== 'notSet' ? true : false}
         className='hidden peer'
         onChange={() => {
           setAnswer(answer)
         }}
       />
-      <label
-        htmlFor={answer}
-        className='inline-flex items-center justify-between rounded-md w-full h-full border-2 text-white peer-checked:border-blue-400 hover:border-gray-200 cursor-pointer peer-checked:text-blue-400'
-      >
+      <label htmlFor={answer} className={styleInput}>
         <div className='block'>
           <div className='w-full text-lg font-semibold px-4'>{answer}</div>
         </div>

diff --git a/src/components/Quizz/Quizz.tsx b/src/components/Quizz/Quizz.tsx
@@ -50,7 +50,13 @@ export const Quizz = () => {
       </div>
       <div className='w-full grid grid-cols-2 grid-rows-2 gap-2 mb-4'>
         {quizzData[currentPage].answers.map(({ answer }) => {
-          return <Answer answer={answer} key={uuid()} />
+          return (
+            <Answer
+              rightAnswer={getRightAnswer(currentPage)}
+              answer={answer}
+              key={uuid()}
+            />
+          )
         })}
       </div>
       <div className='flex items-center gap-10'>