You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.6 KiB
53 lines
1.6 KiB
"use client";
|
|
|
|
import { IoInformation } from "react-icons/io5";
|
|
import type { QuestionField } from "@/lib/schema-adapter";
|
|
import { useQuestionAnswer } from "./question-answer-storage";
|
|
import QuestionTitle from "./question-title";
|
|
|
|
type QuestionButtonProps = {
|
|
question: QuestionField;
|
|
disabled?: boolean;
|
|
};
|
|
|
|
export function QuestionButton({
|
|
question,
|
|
disabled,
|
|
}: QuestionButtonProps) {
|
|
const { setValue, value } = useQuestionAnswer(question);
|
|
const isAnswered = value === true;
|
|
|
|
return (
|
|
<div
|
|
data-question-answered={isAnswered ? "true" : undefined}
|
|
data-question-type={question.type}
|
|
className={[
|
|
"space-y-3 transition-opacity duration-200",
|
|
disabled ? "pointer-events-none opacity-30" : "",
|
|
].join(" ")}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<QuestionTitle question={question} />
|
|
{question.tooltip ? (
|
|
<span className="mt-0.5 flex h-[14px] w-[14px] items-center justify-center rounded-full bg-[#F24E63] text-white">
|
|
<IoInformation aria-hidden="true" className="text-[9px]" />
|
|
</span>
|
|
) : (
|
|
<span className="h-[14px] w-[14px]" aria-hidden="true" />
|
|
)}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
disabled={disabled}
|
|
onClick={() => setValue(true)}
|
|
className="min-h-[50px] rounded-[15px] bg-[#181818] px-5 py-3 group-14 font-semibold text-white"
|
|
>
|
|
{question.extras.options[0] ||
|
|
question.extras.placeHolder ||
|
|
"Continue"}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default QuestionButton;
|