From 6fa4bf8bdd5ce6d47a2766e3b1bd1d851a946030 Mon Sep 17 00:00:00 2001
From: Alex Stan <alex.stan.2010@proton.me>
Date: Sun, 2 Jun 2024 09:46:38 +0300
Subject: [PATCH] Added animations

---
 app/components/question_component.tsx | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/app/components/question_component.tsx b/app/components/question_component.tsx
index f0fae3e..82454fb 100644
--- a/app/components/question_component.tsx
+++ b/app/components/question_component.tsx
@@ -2,6 +2,7 @@ import { ReactComponentElement, ReactNode } from "react";
 import { AnswerType, Question } from "../lib/question";
 import { SessionState } from "../lib/session";
 import { CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/outline";
+import { Button, Transition } from "@headlessui/react";
 
 const QuestionView = ({ question, setState, state }: { question: Question, setState: any, state: SessionState }) => {
 
@@ -35,7 +36,14 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt
         <h1 className="text-4xl font-bold tracking-tight text-gray-50">
           {question && question.text}
         </h1>
-        {question && state.opened[ question.id ] ? (
+        <Transition
+          show={(question && state.opened[ question.id ]) ? true : false}
+          enter="transition-opacity duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-90"
+          leave="transition-opacity duration-150"
+          leaveFrom="opacity-90"
+          leaveTo="opacity-0">
           <div><p className="mt-6 text-lg leading-8 text-gray-200">
             {question.answer}
           </p>
@@ -56,7 +64,7 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt
           <div className="mt-10 flex items-center justify-center gap-x-6">
             <button
               onClick={() => { handleAnswerClick( true )}}
-              className="rounded-md bg-green-600 px-3.5 py-2.5 text-xs font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+              className="rounded-md bg-green-600 px-3.5 py-2.5 text-s font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
               style={{width:'30%', height:'30%'}}
             >
               <CheckCircleIcon></CheckCircleIcon>
@@ -71,9 +79,20 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt
               I didn't know that!
             </button>
           </div>
-        </div>) : (<button className="text-sm font-semibold leading-6 text-gray-200" onClick={handleOpenClick}>
+        </div>
+        </Transition>
+        <Transition
+          show={(question && (state.opened[ question.id ])) ? false : true}
+          enter="transition-opacity duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-90"
+          leave="transition-opacity duration-150"
+          leaveFrom="opacity-90"
+          leaveTo="opacity-0">
+          <Button className="text-sm font-semibold leading-6 text-gray-200" onClick={handleOpenClick}>
             Show answer
-        </button>)}
+          </Button>
+        </Transition>
       </div>
     </div>
   )