next-app/app/components/question_component.tsx

113 lines
4.4 KiB
TypeScript
Raw Normal View History

import { ReactComponentElement, ReactNode } from "react";
import { AnswerType, Question } from "../lib/question";
import { SessionState } from "../lib/session";
import { CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/outline";
2024-06-02 09:46:38 +03:00
import { Button, Transition } from "@headlessui/react";
const QuestionView = ({ question, setState, state }: { question: Question, setState: any, state: SessionState }) => {
const handleOpenClick = () => {
setState( (prevState: SessionState) => ({
...prevState,
opened: {
...prevState.opened,
[question.id]: !prevState.opened[ question.id ]
}
}))
}
const handleAnswerClick = (right: boolean) => {
setState( (prevState: SessionState) => ({
...prevState,
answered: prevState.answered + 1,
wrong: prevState.wrong + (right ? 0 : 1),
right: prevState.right + (right ? 1 : 0),
answer: {
...prevState.answer,
[question.id]: right ? AnswerType.Right : AnswerType.Wrong
}
}))
question.answered = right ? AnswerType.Right : AnswerType.Wrong;
}
return (
<div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
<div className="text-center">
{/* {question && question.text} */}
<Transition
appear={true}
show={question ? true : false /* a bit hacky */}
enter="transition-opacity duration-300"
enterFrom="opacity-0"
enterTo="opacity-90"
leave="transition-opacity duration-150"
leaveFrom="opacity-90"
leaveTo="opacity-0">
<h1 className="text-4xl font-bold tracking-tight text-gray-50">
{question.text}
</h1>
</Transition>
2024-06-02 09:46:38 +03:00
<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>
2024-06-02 09:22:27 +03:00
{/* <div className="mt-10 flex items-center justify-center gap-x-6">
<button
onClick={() => { handleAnswerClick( true )}}
className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
I knew that!
</button>
<button
onClick={() => {handleAnswerClick( false )}}
className="text-sm font-semibold leading-6 text-gray-300"
>
I didn't know that!
</button>
2024-06-02 09:22:27 +03:00
</div> */}
<div className="mt-10 flex items-center justify-center gap-x-6">
<button
onClick={() => { handleAnswerClick( true )}}
2024-06-02 09:46:38 +03:00
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"
2024-06-02 09:22:27 +03:00
style={{width:'30%', height:'30%'}}
>
<CheckCircleIcon></CheckCircleIcon>
I knew that!
</button>
<button
onClick={() => {handleAnswerClick( false )}}
className="rounded-md bg-red-600 px-3.5 py-2.5 text-xs font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
style={{width:'30%', height:'30%'}}
>
<XCircleIcon></XCircleIcon>
I didn't know that!
</button>
</div>
2024-06-02 09:46:38 +03:00
</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
2024-06-02 09:46:38 +03:00
</Button>
</Transition>
</div>
</div>
)
}
export default QuestionView;