next-app/app/components/question_component.tsx

import { ReactComponentElement, ReactNode, useEffect } 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";
import wait from "../lib/delay";
import { motion } from "framer-motion";

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 ]
      }
    }))
  }

  useEffect( () => {
    wait( 1000 );
  }, [] );

  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>
        {/* <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"> */}
        {/* <motion.div animate={{visibility: ((question && state.opened[ question.id ]) ? "visible" : "collapse") }}> */}
        <motion.div animate={(question && state.opened[ question.id ]) ? {visibility: "visible", opacity: 1} : {visibility: "collapse", opacity: 0}}>
          <div><p className="mt-6 text-lg leading-8 text-gray-200">
            {question.answer}
          </p>
          {/* <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>
          </div> */}
          <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-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={{minWidth:'30%', minHeight:'30%'}}
            >
              <CheckCircleIcon></CheckCircleIcon>
              I knew that!
            </button>
            <button
              onClick={() => {handleAnswerClick( false )}}
              className="rounded-md bg-red-600 px-3.5 py-2.5 text-s 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={{minWidth:'30%', minHeight:'30%'}}
            >
              <XCircleIcon></XCircleIcon>
              I didn't know that!
            </button>
          </div>
        </div>
        </motion.div>  
        <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="leading-6 text-black back rounded-md bg-white text-sm font-semibold text-gray-900" onClick={handleOpenClick} style = {{padding: '5px'}}>
            Show answer
          </Button>
        </Transition>
      </div>
    </div>
  )
}

export default QuestionView;