109 lines
5.2 KiB
TypeScript
109 lines
5.2 KiB
TypeScript
import React from 'react';
|
|
import { EmployeeQuestion } from '../../employeeQuestions';
|
|
import { QuestionInput } from '../ui/QuestionInput';
|
|
|
|
interface EnhancedFigmaQuestionProps {
|
|
questionNumber?: string | number;
|
|
question: EmployeeQuestion;
|
|
answer?: string;
|
|
onAnswerChange?: (value: string) => void;
|
|
onBack?: () => void;
|
|
onNext?: () => void;
|
|
showNavigation?: boolean;
|
|
nextLabel?: string;
|
|
backLabel?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export const EnhancedFigmaQuestion: React.FC<EnhancedFigmaQuestionProps> = ({
|
|
questionNumber = 'Q',
|
|
question,
|
|
answer = '',
|
|
onAnswerChange,
|
|
onBack,
|
|
onNext,
|
|
showNavigation = true,
|
|
nextLabel = 'Next',
|
|
backLabel = 'Back',
|
|
className = ''
|
|
}) => {
|
|
return (
|
|
<div className={`w-full max-w-[600px] px-5 pt-5 pb-6 bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 inline-flex flex-col justify-end items-end gap-4 ${className}`}>
|
|
{/* Question Header */}
|
|
<div className="self-stretch inline-flex justify-start items-start gap-3">
|
|
<div className="justify-start text-gray-400 text-xl font-medium font-['Inter'] leading-loose">
|
|
{questionNumber}
|
|
</div>
|
|
<div className="flex-1 inline-flex flex-col justify-start items-start gap-2">
|
|
<div className="self-stretch justify-start text-[--text-primary] text-xl font-semibold font-['Inter'] leading-loose">
|
|
{question.prompt}
|
|
</div>
|
|
<div className="self-stretch justify-start text-[--text-secondary] text-sm font-normal font-['Inter'] leading-tight">
|
|
{question.required ? 'Required' : 'Optional'} • {question.category}
|
|
{question.type && ` • ${question.type}`}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Separator */}
|
|
<div className="self-stretch h-px bg-gray-200 dark:bg-gray-700"></div>
|
|
|
|
{/* Answer Section */}
|
|
<div className="self-stretch inline-flex justify-start items-start gap-3">
|
|
<div className="justify-start text-gray-400 text-xl font-medium font-['Inter'] leading-loose">A</div>
|
|
<div className="flex-1">
|
|
<QuestionInput
|
|
question={question}
|
|
value={answer}
|
|
onChange={onAnswerChange || (() => { })}
|
|
className="border-0 bg-transparent focus:ring-0 p-0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
{showNavigation && (
|
|
<div className="inline-flex justify-start items-center gap-3">
|
|
{onBack && (
|
|
<button
|
|
onClick={onBack}
|
|
className="px-4 py-3.5 bg-gray-100 dark:bg-gray-700 rounded-full flex justify-center items-center gap-1 overflow-hidden hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
|
|
>
|
|
<div className="relative">
|
|
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M13 15L8 10L13 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</div>
|
|
<div className="px-1 flex justify-center items-center">
|
|
<div className="justify-center text-[--text-primary] text-sm font-medium font-['Inter'] leading-tight">
|
|
{backLabel}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
)}
|
|
|
|
{onNext && (
|
|
<button
|
|
onClick={onNext}
|
|
className="px-4 py-3.5 bg-blue-500 rounded-full border-2 border-blue-400 flex justify-center items-center gap-1 overflow-hidden hover:bg-blue-600 transition-colors"
|
|
>
|
|
<div className="px-1 flex justify-center items-center">
|
|
<div className="justify-center text-white text-sm font-medium font-['Inter'] leading-tight">
|
|
{nextLabel}
|
|
</div>
|
|
</div>
|
|
<div className="relative">
|
|
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M8 15L13 10L8 5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</div>
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EnhancedFigmaQuestion;
|