diff --git a/src/components/Answer/Answer.tsx b/src/components/Answer/Answer.tsx index 64dce8a..e4242a3 100644 --- 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 = ({ answer }) => { +export const Answer: FC = ({ answer, rightAnswer }) => { const setAnswer = useAnswerStore((state) => state.setAnswer) + const status = useStatusStore((state) => state.status) + const [styleInput, setStyleInput] = useState( + '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( + '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 ( -
+
{ setAnswer(answer) }} /> -
{quizzData[currentPage].answers.map(({ answer }) => { - return + return ( + + ) })}