219 lines
10 KiB
TypeScript
219 lines
10 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Card } from '../components/UiKit';
|
|
import { QuestionInput } from '../components/ui/QuestionInput';
|
|
import { Question } from '../components/ui/Question';
|
|
import { FigmaQuestion } from '../components/figma/FigmaQuestion';
|
|
import { EmployeeQuestion } from '../employeeQuestions';
|
|
|
|
const QuestionTypesDemo: React.FC = () => {
|
|
const [answers, setAnswers] = useState<Record<string, string>>({});
|
|
|
|
const demoQuestions: EmployeeQuestion[] = [
|
|
{
|
|
id: 'text_demo',
|
|
prompt: 'What is your full name?',
|
|
category: 'personal',
|
|
type: 'text',
|
|
placeholder: 'Enter your full name',
|
|
required: true,
|
|
},
|
|
{
|
|
id: 'scale_demo',
|
|
prompt: 'How satisfied are you with your role?',
|
|
category: 'role',
|
|
type: 'scale',
|
|
scaleMin: 1,
|
|
scaleMax: 10,
|
|
scaleLabels: { min: 'Very dissatisfied', max: 'Very satisfied' },
|
|
required: true,
|
|
},
|
|
{
|
|
id: 'yesno_demo',
|
|
prompt: 'Do you have regular one-on-ones with your manager?',
|
|
category: 'collaboration',
|
|
type: 'yesno',
|
|
required: false,
|
|
},
|
|
{
|
|
id: 'textarea_demo',
|
|
prompt: 'Describe your main responsibilities',
|
|
category: 'role',
|
|
type: 'textarea',
|
|
placeholder: 'List your key daily tasks and responsibilities...',
|
|
required: true,
|
|
},
|
|
{
|
|
id: 'select_demo',
|
|
prompt: 'What is your department?',
|
|
category: 'role',
|
|
type: 'select',
|
|
options: ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance', 'Operations'],
|
|
required: false,
|
|
}
|
|
];
|
|
|
|
const [currentDemoQuestion, setCurrentDemoQuestion] = useState(0);
|
|
|
|
const handleAnswerChange = (questionId: string, value: string) => {
|
|
setAnswers(prev => ({ ...prev, [questionId]: value }));
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[--background-primary] py-8 px-4">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-3xl font-bold text-[--text-primary] mb-2">
|
|
Question Types Demo
|
|
</h1>
|
|
<p className="text-[--text-secondary]">
|
|
Showcase of different question input types for the employee questionnaire
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
{/* Traditional Question Layout */}
|
|
<div>
|
|
<h2 className="text-xl font-semibold text-[--text-primary] mb-4">
|
|
Traditional Layout
|
|
</h2>
|
|
<div className="space-y-6">
|
|
{demoQuestions.map((question, index) => (
|
|
<Card key={question.id} className="p-6">
|
|
<Question
|
|
label={`${index + 1}. ${question.prompt}`}
|
|
required={question.required}
|
|
description={`Type: ${question.type} | Category: ${question.category}`}
|
|
>
|
|
<QuestionInput
|
|
question={question}
|
|
value={answers[question.id] || ''}
|
|
onChange={(value) => handleAnswerChange(question.id, value)}
|
|
/>
|
|
</Question>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Figma Question Layout */}
|
|
<div>
|
|
<h2 className="text-xl font-semibold text-[--text-primary] mb-4">
|
|
Figma Design Layout
|
|
</h2>
|
|
|
|
<div className="mb-4">
|
|
<div className="flex gap-2 mb-4">
|
|
{demoQuestions.map((_, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => setCurrentDemoQuestion(index)}
|
|
className={`px-3 py-1 rounded text-sm ${currentDemoQuestion === index
|
|
? 'bg-blue-500 text-white'
|
|
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
|
}`}
|
|
>
|
|
Q{index + 1}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-center">
|
|
<FigmaQuestion
|
|
questionNumber={`Q${currentDemoQuestion + 1}`}
|
|
title={demoQuestions[currentDemoQuestion].prompt}
|
|
description={
|
|
demoQuestions[currentDemoQuestion].required
|
|
? 'Required'
|
|
: 'Optional'
|
|
}
|
|
answer={answers[demoQuestions[currentDemoQuestion].id] || ''}
|
|
onAnswerChange={(value) =>
|
|
handleAnswerChange(demoQuestions[currentDemoQuestion].id, value)
|
|
}
|
|
onBack={
|
|
currentDemoQuestion > 0
|
|
? () => setCurrentDemoQuestion(prev => prev - 1)
|
|
: undefined
|
|
}
|
|
onNext={
|
|
currentDemoQuestion < demoQuestions.length - 1
|
|
? () => setCurrentDemoQuestion(prev => prev + 1)
|
|
: undefined
|
|
}
|
|
nextLabel={
|
|
currentDemoQuestion < demoQuestions.length - 1
|
|
? 'Next'
|
|
: 'Finish'
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
{/* Alternative Input Below Figma Question */}
|
|
<div className="mt-6 max-w-2xl mx-auto">
|
|
<Card className="p-6">
|
|
<Question
|
|
label={`Alternative Input for Q${currentDemoQuestion + 1}`}
|
|
description={`Specialized ${demoQuestions[currentDemoQuestion].type} input`}
|
|
>
|
|
<QuestionInput
|
|
question={demoQuestions[currentDemoQuestion]}
|
|
value={answers[demoQuestions[currentDemoQuestion].id] || ''}
|
|
onChange={(value) =>
|
|
handleAnswerChange(demoQuestions[currentDemoQuestion].id, value)
|
|
}
|
|
/>
|
|
</Question>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Current Answers Display */}
|
|
<div className="mt-8">
|
|
<Card className="p-6">
|
|
<h3 className="text-lg font-semibold text-[--text-primary] mb-4">
|
|
Current Answers
|
|
</h3>
|
|
<div className="space-y-2">
|
|
{demoQuestions.map((question) => (
|
|
<div key={question.id} className="grid grid-cols-1 md:grid-cols-3 gap-2 py-2 border-b border-[--border-color]">
|
|
<div className="font-medium text-[--text-primary]">
|
|
{question.prompt}
|
|
</div>
|
|
<div className="text-[--text-secondary] text-sm">
|
|
{question.type}
|
|
</div>
|
|
<div className="text-[--text-primary]">
|
|
{answers[question.id] || <span className="text-[--text-secondary] italic">No answer</span>}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Navigation Links */}
|
|
<div className="mt-8 text-center">
|
|
<div className="space-x-4">
|
|
<a
|
|
href="#/employee-questionnaire"
|
|
className="inline-block px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
|
|
>
|
|
Traditional Questionnaire
|
|
</a>
|
|
<a
|
|
href="#/employee-questionnaire-steps"
|
|
className="inline-block px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors"
|
|
>
|
|
Stepped Questionnaire
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default QuestionTypesDemo;
|