BlahajTeam/next-app
3
0
Fork 0
Code Issues Pull requests 1 Packages Projects Releases Wiki Activity

Added animations

Browse source
This commit is contained in:
Alex Stan 2024-06-02 09:46:38 +03:00
parent 28eeb31054
commit 6fa4bf8bdd
1 changed files with 23 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
app/components/question_component.tsx
View file

@ -2,6 +2,7 @@ import { ReactComponentElement, ReactNode } from "react";
import { AnswerType, Question } from "../lib/question"; import { AnswerType, Question } from "../lib/question";
import { SessionState } from "../lib/session"; import { SessionState } from "../lib/session";
import { CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/outline"; 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 }) => { 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"> <h1 className="text-4xl font-bold tracking-tight text-gray-50">
{question && question.text} {question && question.text}
</h1> </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"> <div><p className="mt-6 text-lg leading-8 text-gray-200">
{question.answer} {question.answer}
</p> </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"> <div className="mt-10 flex items-center justify-center gap-x-6">
<button <button
onClick={() => { handleAnswerClick( true )}} 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%'}} style={{width:'30%', height:'30%'}}
> >
<CheckCircleIcon></CheckCircleIcon> <CheckCircleIcon></CheckCircleIcon>
@ -71,9 +79,20 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt
I didn't know that! I didn't know that!
</button> </button>
</div> </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 Show answer
</button>)} </Button>
</Transition>
</div> </div>
</div> </div>
) )