44 lines
1.7 KiB
TypeScript
44 lines
1.7 KiB
TypeScript
import { forwardRef } from 'react';
|
|
import { QuestionType } from '@/types';
|
|
|
|
interface QuestionProps {
|
|
question: QuestionType;
|
|
answer?: string;
|
|
onSelect: (questionId: number, option: string) => void;
|
|
}
|
|
|
|
export const Question = forwardRef<HTMLDivElement, QuestionProps>(
|
|
({ question, answer, onSelect }, ref) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className="mb-4 scroll-mt-20 rounded-md border bg-white p-4 shadow-sm md:mb-8 md:p-6"
|
|
id={`question-${question.id}`}
|
|
>
|
|
<h3 className="mb-4 text-[17px] font-medium leading-[1.65] md:text-lg md:leading-7">
|
|
{question.id}. {question.content}
|
|
</h3>
|
|
<div className="space-y-2">
|
|
{question.options.map((option) => (
|
|
<button
|
|
type="button"
|
|
aria-pressed={answer === option.value}
|
|
key={option.value}
|
|
className={`min-h-12 w-full touch-manipulation rounded-md px-4 py-3 text-left text-base leading-6 transition-colors duration-200
|
|
${answer === option.value
|
|
? 'border-2 border-blue-600 bg-blue-50 font-medium text-blue-950'
|
|
: 'border bg-white active:bg-gray-100 md:hover:bg-gray-50'
|
|
}`}
|
|
onClick={() => onSelect(question.id, option.value)}
|
|
>
|
|
{option.content}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
Question.displayName = 'Question';
|