import React, { useState } from 'react'; // Icon SVG Component - From Figma designs export const AuditlyIcon: React.FC = () => (
); // Progress Bar Component for Section Headers export const SectionProgressBar: React.FC<{ currentSection: number; totalSections: number; sectionName: string }> = ({ currentSection, totalSections, sectionName }) => { return (
{Array.from({ length: 7 }, (_, index) => { const isActive = index === currentSection - 1; return (
{isActive ? ( ) : ( )}
); })}
{sectionName}
); }; // Welcome Screen - Step 1 Style export const WelcomeScreen: React.FC<{ onStart: () => void; imageUrl?: string; }> = ({ onStart, imageUrl = "/image/onboarding-robot.png" }) => { return (
Welcome to the Internal Staff Survey
The survey takes around 15 minutes to complete.
Welcome
); }; // Section Intro Component export const SectionIntro: React.FC<{ sectionNumber: string; title: string; description: string; onStart: () => void; imageUrl?: string; }> = ({ sectionNumber, title, description, onStart, imageUrl = "https://placehold.co/560x682" }) => { return (
{sectionNumber}
{title}
{description}
{title}
); }; // Form Input Field Component export const FormField: React.FC<{ label: string; value: string; onChange: (value: string) => void; placeholder?: string; required?: boolean; type?: 'text' | 'email'; }> = ({ label, value, onChange, placeholder, required = false, type = 'text' }) => { return (
{label}
{required && (
*
)}
onChange(e.target.value)} className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight placeholder:text-[--Neutrals-NeutralSlate950] outline-none" placeholder={placeholder} />
); }; // Personal Information Form Component export const PersonalInfoForm: React.FC<{ formData: { email: string; name: string; company: string }; onChange: (data: { email: string; name: string; company: string }) => void; onNext: () => void; }> = ({ formData, onChange, onNext }) => { const isValid = formData.email && formData.name && formData.company; return (
Personal Information
onChange({ ...formData, email })} placeholder="Email@gmail.com" type="email" required /> onChange({ ...formData, name })} placeholder="John Doe" required /> onChange({ ...formData, company })} placeholder="Doe Enterprises" required />
); }; // Text Area Question Component export const TextAreaQuestion: React.FC<{ question: string; value: string; onChange: (value: string) => void; onBack?: () => void; onNext: () => void; onSkip?: () => void; currentStep?: number; totalSteps?: number; sectionName?: string; placeholder?: string; }> = ({ question, value, onChange, onBack, onNext, onSkip, currentStep, totalSteps, sectionName, placeholder = "Type your answer...." }) => { return (
{question}