ra/auditly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit before mass find + replace

Browse Source
This commit is contained in:
Ra
2025-08-24 16:18:58 -07:00
parent f2145edf56
commit 1ed3e16ff6
28 changed files with 4850 additions and 1181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CompanyWiki/CompanyWikiCompletedState.tsx
View File

@@ -72,7 +72,7 @@ export const CompanyWikiCompletedState: React.FC<CompanyWikiCompletedStateProps>
onClick={() => onSectionClick?.(sectionNumber)}
className={`self-stretch p-2 rounded-[10px] inline-flex justify-start items-center gap-2 overflow-hidden cursor-pointer hover:bg-Main-BG-Gray-50 dark:hover:bg-[--Neutrals-NeutralSlate700] ${isActive ? 'bg-Main-BG-Gray-100 dark:bg-[--Neutrals-NeutralSlate700] shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]' : ''}`}
>
<div className={`h-5 p-0.5 rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden ${isActive ? 'bg-Brand-Orange' : 'bg-Text-Gray-100 dark:bg-Neutrals-NeutralSlate600'}`}>
<div className={`h-5 p-0.5 rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden ${isActive ? 'bg-[--Brand-Orange]' : 'bg-Text-Gray-100 dark:bg-Neutrals-NeutralSlate600'}`}>
<div className={`w-4 text-center justify-start text-xs font-medium font-['Inter'] leading-none ${isActive ? 'text-Neutrals-NeutralSlate0' : 'text-Text-Dark-950 dark:text-Neutrals-NeutralSlate200'}`}>
{sectionNumber}
</div>

6
src/components/CompanyWiki/CompanyWikiEmptyState.tsx
View File

@@ -21,7 +21,7 @@ export const CompanyWikiEmptyState: React.FC<CompanyWikiEmptyStateProps> = ({
</div>
<div className="self-stretch px-3 flex flex-col justify-start items-start gap-1.5">
<div className="self-stretch p-2 bg-Main-BG-Gray-100 rounded-full shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)] inline-flex justify-start items-center gap-2 overflow-hidden">
<div className="h-5 p-0.5 bg-Brand-Orange rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden">
<div className="h-5 p-0.5 bg-[--Brand-Orange] rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden">
<div className="w-4 text-center justify-start text-[--Neutrals-NeutralSlate0] text-xs font-medium font-['Inter'] leading-none">1</div>
</div>
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] text-xs font-medium font-['Inter'] leading-none">Company Overview & Vision</div>
@@ -100,7 +100,7 @@ export const CompanyWikiEmptyState: React.FC<CompanyWikiEmptyStateProps> = ({
{/* Progress Bar */}
<div className="w-full bg-[--Neutrals-NeutralSlate200] rounded-full h-2 mb-8">
<div
className="bg-Brand-Orange h-2 rounded-full transition-all duration-300"
className="bg-[--Brand-Orange] h-2 rounded-full transition-all duration-300"
style={{ width: `${progress}%` }}
></div>
</div>
@@ -108,7 +108,7 @@ export const CompanyWikiEmptyState: React.FC<CompanyWikiEmptyStateProps> = ({
{/* Action Button */}
<button
onClick={onCompleteOnboarding}
className="px-8 py-3 bg-Brand-Orange text-white rounded-[999px] font-medium text-base hover:bg-Brand-Orange/90 transition-colors"
className="px-8 py-3 bg-[--Brand-Orange] text-white rounded-[999px] font-medium text-base hover:bg-[--Brand-Orange]/90 transition-colors"
>
Complete Onboarding
</button>

8
src/components/CompanyWiki/CompanyWikiEmptyStateDark.tsx
View File

@@ -41,7 +41,7 @@ export const CompanyWikiEmptyState: React.FC<CompanyWikiEmptyStateProps> = ({
key={index}
className={`self-stretch p-2 rounded-[10px] inline-flex justify-start items-center gap-2 overflow-hidden ${isActive ? 'bg-Main-BG-Gray-100 dark:bg-[--Neutrals-NeutralSlate800] shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]' : 'hover:bg-Main-BG-Gray-50 dark:hover:bg-Neutrals-NeutralSlate700'}`}
>
<div className={`h-5 p-0.5 rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden ${isActive ? 'bg-Brand-Orange' : 'bg-Text-Gray-100 dark:bg-Neutrals-NeutralSlate600'}`}>
<div className={`h-5 p-0.5 rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden ${isActive ? 'bg-[--Brand-Orange]' : 'bg-Text-Gray-100 dark:bg-Neutrals-NeutralSlate600'}`}>
<div className={`w-4 text-center justify-start text-xs font-medium font-['Inter'] leading-none ${isActive ? 'text-Neutrals-NeutralSlate0' : 'text-Text-Dark-950 dark:text-Neutrals-NeutralSlate200'}`}>
{sectionNumber}
</div>
@@ -67,7 +67,7 @@ export const CompanyWikiEmptyState: React.FC<CompanyWikiEmptyStateProps> = ({
{/* Progress Illustration Placeholder */}
<div className="w-[280px] h-[200px] bg-Text-Gray-100 dark:bg-[--Neutrals-NeutralSlate700] rounded-2xl flex items-center justify-center">
<div className="text-center">
<div className="w-16 h-16 mx-auto mb-4 bg-Brand-Orange rounded-full flex items-center justify-center">
<div className="w-16 h-16 mx-auto mb-4 bg-[--Brand-Orange] rounded-full flex items-center justify-center">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" className="text-white">
<path d="M16 8v8l4 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<circle cx="16" cy="16" r="12" stroke="currentColor" strokeWidth="2" />
@@ -89,7 +89,7 @@ export const CompanyWikiEmptyState: React.FC<CompanyWikiEmptyStateProps> = ({
{/* Progress Bar */}
<div className="self-stretch h-2 bg-Text-Gray-100 dark:bg-[--Neutrals-NeutralSlate700] rounded-full overflow-hidden">
<div
className="h-full bg-Brand-Orange rounded-full transition-all duration-300"
className="h-full bg-[--Brand-Orange] rounded-full transition-all duration-300"
style={{ width: `${progress}%` }}
/>
</div>
@@ -97,7 +97,7 @@ export const CompanyWikiEmptyState: React.FC<CompanyWikiEmptyStateProps> = ({
{/* Action Button */}
<button
onClick={onCompleteOnboarding}
className="w-full px-6 py-3 bg-Brand-Orange hover:bg-orange-600 text-[--Neutrals-NeutralSlate0] text-base font-medium font-['Inter'] leading-normal rounded-xl transition-colors"
className="w-full px-6 py-3 bg-[--Brand-Orange] hover:bg-orange-600 text-[--Neutrals-NeutralSlate0] text-base font-medium font-['Inter'] leading-normal rounded-xl transition-colors"
>
Complete Onboarding
</button>

2
src/components/CompanyWiki/InviteEmployeesModal.tsx
View File

@@ -80,7 +80,7 @@ export const InviteEmployeesModal: React.FC<InviteEmployeesModalProps> = ({
<button
onClick={handleSubmit}
disabled={!email.trim()}
className="px-4 py-2 bg-Brand-Orange rounded-lg text-[--Neutrals-NeutralSlate0] text-sm font-medium font-['Inter'] leading-tight hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed"
className="px-4 py-2 bg-[--Brand-Orange] rounded-lg text-[--Neutrals-NeutralSlate0] text-sm font-medium font-['Inter'] leading-tight hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed"
>
Send Invite
</button>

10
src/components/CompanyWiki/InviteMultipleEmployeesModal.tsx
View File

@@ -110,7 +110,7 @@ export const InviteMultipleEmployeesModal: React.FC<InviteMultipleEmployeesModal
onClick={() => handleEmployeeSelect(employee)}
className="w-full px-3 py-2 text-left hover:bg-Text-Gray-50 flex items-center gap-3 border-b border-Text-Gray-100 last:border-b-0"
>
<div className="w-8 h-8 bg-Brand-Orange rounded-full flex items-center justify-center text-white text-sm font-medium">
<div className="w-8 h-8 bg-[--Brand-Orange] rounded-full flex items-center justify-center text-white text-sm font-medium">
{employee.name.charAt(0)}
</div>
<div className="flex-1">
@@ -133,15 +133,15 @@ export const InviteMultipleEmployeesModal: React.FC<InviteMultipleEmployeesModal
{selectedEmployees.map((employee) => (
<div
key={employee.id}
className="px-3 py-1.5 bg-Brand-Orange bg-opacity-10 rounded-full flex items-center gap-2"
className="px-3 py-1.5 bg-[--Brand-Orange] bg-opacity-10 rounded-full flex items-center gap-2"
>
<div className="w-5 h-5 bg-Brand-Orange rounded-full flex items-center justify-center text-white text-xs font-medium">
<div className="w-5 h-5 bg-[--Brand-Orange] rounded-full flex items-center justify-center text-white text-xs font-medium">
{employee.name.charAt(0)}
</div>
<span className="text-sm text-[--Neutrals-NeutralSlate950]">{employee.name}</span>
<button
onClick={() => handleEmployeeRemove(employee.id)}
className="w-4 h-4 flex items-center justify-center hover:bg-Brand-Orange hover:bg-opacity-20 rounded-full"
className="w-4 h-4 flex items-center justify-center hover:bg-[--Brand-Orange] hover:bg-opacity-20 rounded-full"
>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
<path d="M9 3L3 9M3 3L9 9" stroke="#666D80" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
@@ -166,7 +166,7 @@ export const InviteMultipleEmployeesModal: React.FC<InviteMultipleEmployeesModal
<button
onClick={handleInvite}
disabled={selectedEmployees.length === 0}
className="px-4 py-2 bg-Brand-Orange rounded-lg text-[--Neutrals-NeutralSlate0] text-sm font-medium font-['Inter'] leading-tight hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed"
className="px-4 py-2 bg-[--Brand-Orange] rounded-lg text-[--Neutrals-NeutralSlate0] text-sm font-medium font-['Inter'] leading-tight hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed"
>
Send Invites ({selectedEmployees.length})
</button>

560
src/components/figma/FigmaEmployeeForms.tsx Normal file
View File

@@ -0,0 +1,560 @@
import React, { useState } from 'react';
// Icon SVG Component - From Figma designs
export const AuditlyIcon: React.FC = () => (
<svg width="24" height="30" viewBox="0 0 24 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" fillRule="evenodd" clipRule="evenodd" d="M2.57408 17.8138C3.11835 18.3649 3.11834 19.2585 2.57406 19.8097L2.54619 19.8379C2.00191 20.389 1.11946 20.389 0.57519 19.8379C0.030919 19.2867 0.0309274 18.3931 0.575208 17.842L0.603083 17.8137C1.14736 17.2626 2.02981 17.2626 2.57408 17.8138Z" fill="url(#paint0_linear_981_10577)" />
<path opacity="0.7" fillRule="evenodd" clipRule="evenodd" d="M9.12583 18.2374C9.66912 18.7896 9.66752 19.6832 9.12226 20.2333L5.2617 24.1286C4.71644 24.6787 3.83399 24.6771 3.2907 24.125C2.74741 23.5728 2.74901 22.6792 3.29427 22.1291L7.15483 18.2338C7.70009 17.6837 8.58254 17.6853 9.12583 18.2374Z" fill="url(#paint1_linear_981_10577)" />
<defs>
<linearGradient id="paint0_linear_981_10577" x1="1.57463" y1="17.4004" x2="1.57463" y2="20.2513" gradientUnits="userSpaceOnUse">
<stop stopColor="white" stopOpacity="0.8" />
<stop offset="1" stopColor="white" stopOpacity="0.5" />
</linearGradient>
<linearGradient id="paint1_linear_981_10577" x1="6.20827" y1="17.8223" x2="6.20827" y2="24.5401" gradientUnits="userSpaceOnUse">
<stop stopColor="white" stopOpacity="0.8" />
<stop offset="1" stopColor="white" stopOpacity="0.5" />
</linearGradient>
</defs>
</svg>
);
// Progress Bar Component for Section Headers
export const SectionProgressBar: React.FC<{ currentSection: number; totalSections: number; sectionName: string }> = ({
currentSection,
totalSections,
sectionName
}) => {
return (
<div className="w-[464px] max-w-[464px] min-w-[464px] absolute top-[24px] left-1/2 transform -translate-x-1/2 flex flex-col justify-start items-center gap-4">
<div className="p-4 bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
{Array.from({ length: 7 }, (_, index) => {
const isActive = index === currentSection - 1;
return (
<div key={index}>
{isActive ? (
<svg width="24" height="4" viewBox="0 0 24 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="4" rx="2" fill="var(--Brand-Orange, #3399FF)" />
</svg>
) : (
<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="4" height="4" rx="2" fill="var(--Neutrals-NeutralSlate300, #D5D7DA)" />
</svg>
)}
</div>
);
})}
</div>
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate500 text-base font-medium font-['Neue_Montreal'] leading-normal">
{sectionName}
</div>
</div>
);
};
// Welcome Screen - Step 1 Style
export const WelcomeScreen: React.FC<{
onStart: () => void;
imageUrl?: string;
}> = ({ onStart, imageUrl = "https://placehold.co/560x682" }) => {
return (
<div className="w-[1440px] bg-white inline-flex justify-start items-center overflow-hidden">
<div className="flex-1 h-[810px] px-32 py-48 bg-Neutrals-NeutralSlate0 flex justify-center items-center gap-2.5 overflow-hidden">
<div className="flex-1 max-w-[464px] inline-flex flex-col justify-start items-start gap-12">
<div className="self-stretch flex flex-col justify-start items-start gap-6">
<div className="w-12 h-12 relative bg-Brand-Orange rounded-xl outline outline-2 outline-offset-[-2px] outline-blue-400 overflow-hidden">
<div className="w-12 h-12 left-0 top-0 absolute bg-gradient-to-b from-white/0 to-white/10" />
<div className="left-[12px] top-[9.33px] absolute">
<AuditlyIcon />
</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-4">
<div className="self-stretch justify-start text-Neutrals-NeutralSlate800 text-5xl font-medium font-['Neue_Montreal'] leading-[48px]">
Welcome to the Internal Staff Survey
</div>
<div className="self-stretch justify-center text-Neutrals-NeutralSlate500 text-base font-normal font-['Inter'] leading-normal">
The survey takes around 15 minutes to complete.
</div>
</div>
</div>
<button
onClick={onStart}
className="self-stretch px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 inline-flex justify-center items-center gap-1 overflow-hidden hover:bg-orange-600 transition-colors"
>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Start</div>
</div>
</button>
</div>
</div>
<div className="flex-1 h-[810px] px-20 py-16 flex justify-center items-center gap-2.5 overflow-hidden">
<div className="flex-1 self-stretch origin-top-left rotate-180 rounded-3xl inline-flex flex-col justify-center items-center gap-2.5 overflow-hidden">
<img className="self-stretch flex-1" src={imageUrl} alt="Welcome" />
</div>
</div>
</div>
);
};
// 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 (
<div className="w-[1440px] bg-white inline-flex justify-start items-center overflow-hidden">
<div className="flex-1 h-[810px] px-32 py-48 bg-Neutrals-NeutralSlate0 flex justify-center items-center gap-2.5 overflow-hidden">
<div className="flex-1 max-w-[464px] inline-flex flex-col justify-start items-start gap-12">
<div className="self-stretch flex flex-col justify-start items-start gap-6">
<div className="w-12 h-12 relative bg-Brand-Orange rounded-xl outline outline-2 outline-offset-[-2px] outline-blue-400 overflow-hidden">
<div className="w-12 h-12 left-0 top-0 absolute bg-gradient-to-b from-white/0 to-white/10" />
<div className="left-[12px] top-[9.33px] absolute">
<AuditlyIcon />
</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-4">
<div className="px-3 py-1.5 bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] uppercase leading-none">
{sectionNumber}
</div>
</div>
<div className="self-stretch justify-start text-Neutrals-NeutralSlate800 text-5xl font-medium font-['Neue_Montreal'] leading-[48px]">
{title}
</div>
<div className="self-stretch justify-center text-Neutrals-NeutralSlate500 text-base font-normal font-['Inter'] leading-normal">
{description}
</div>
</div>
</div>
<button
onClick={onStart}
className="self-stretch px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 inline-flex justify-center items-center gap-1 overflow-hidden hover:bg-orange-600 transition-colors"
>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Start</div>
</div>
</button>
</div>
</div>
<div className="flex-1 h-[810px] px-20 py-16 flex justify-center items-center gap-2.5 overflow-hidden">
<div className="flex-1 self-stretch origin-top-left rotate-180 rounded-3xl inline-flex flex-col justify-center items-center gap-2.5 overflow-hidden">
<img className="self-stretch flex-1" src={imageUrl} alt={title} />
</div>
</div>
</div>
);
};
// 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 (
<div className="self-stretch flex flex-col justify-start items-start gap-2">
<div className="self-stretch inline-flex justify-start items-center gap-0.5">
<div className="justify-start text-Neutrals-NeutralSlate900 text-sm font-normal font-['Inter'] leading-tight">
{label}
</div>
{required && (
<div className="justify-start text-Brand-Orange text-sm font-medium font-['Inter'] leading-tight">*</div>
)}
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-1">
<div className="self-stretch px-4 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
<input
type={type}
value={value}
onChange={(e) => onChange(e.target.value)}
className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight placeholder:text-Neutrals-NeutralSlate500 outline-none"
placeholder={placeholder}
/>
</div>
</div>
</div>
);
};
// 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 (
<div className="w-[1440px] h-[810px] px-[488px] py-32 bg-Neutrals-NeutralSlate0 inline-flex flex-col justify-center items-center gap-9">
<div className="w-full max-w-[464px] min-w-[464px] flex flex-col justify-start items-start gap-12">
<div className="self-stretch flex flex-col justify-start items-start gap-8">
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate950 text-2xl font-medium font-['Neue_Montreal'] leading-normal">
Personal Information
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-6">
<FormField
label="Email"
value={formData.email}
onChange={(email) => onChange({ ...formData, email })}
placeholder="Email@gmail.com"
type="email"
required
/>
<FormField
label="Your Name"
value={formData.name}
onChange={(name) => onChange({ ...formData, name })}
placeholder="John Doe"
required
/>
<FormField
label="What is the name of your Company and department?"
value={formData.company}
onChange={(company) => onChange({ ...formData, company })}
placeholder="Doe Enterprises"
required
/>
</div>
</div>
<button
onClick={onNext}
disabled={!isValid}
className="self-stretch h-12 px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 inline-flex justify-center items-center gap-1 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed hover:bg-orange-600 transition-colors"
>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Next</div>
</div>
</button>
</div>
</div>
);
};
// 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 (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0 inline-flex flex-col justify-center items-center gap-9">
<div className="w-full max-w-[464px] min-w-[464px] flex flex-col justify-start items-start gap-12">
<div className="self-stretch flex flex-col justify-start items-start gap-8">
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate950 text-2xl font-medium font-['Neue_Montreal'] leading-normal">
{question}
</div>
<div className="self-stretch min-h-40 p-5 relative bg-Neutrals-NeutralSlate100 rounded-xl inline-flex justify-start items-start gap-2.5">
<textarea
value={value}
onChange={(e) => onChange(e.target.value)}
className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-base font-normal font-['Inter'] leading-normal placeholder:text-Neutrals-NeutralSlate500 outline-none resize-none"
placeholder={placeholder}
rows={6}
/>
<div className="w-3 h-3 absolute right-5 bottom-5">
<div className="w-2 h-2 absolute top-0.5 left-0.5 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
<div className="w-1 h-1 absolute bottom-0 right-0 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
</div>
</div>
</div>
<div className="self-stretch inline-flex justify-start items-start gap-2">
{onBack && (
<button
onClick={onBack}
className="h-12 px-8 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-neutral-200 transition-colors"
>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Back</div>
</div>
</button>
)}
<button
onClick={onNext}
className="flex-1 h-12 px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden hover:bg-orange-600 transition-colors"
>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Next</div>
</div>
</button>
</div>
</div>
{/* Step indicator */}
{currentStep && totalSteps && (
<div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] uppercase leading-none">
{currentStep} of {totalSteps}
</div>
</div>
)}
{/* Skip button */}
{onSkip && (
<button
onClick={onSkip}
className="px-3 py-1.5 right-[24px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden hover:bg-neutral-200 transition-colors"
>
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-none">Skip</div>
</button>
)}
{/* Progress bar */}
{currentStep && totalSteps && sectionName && (
<SectionProgressBar
currentSection={currentStep}
totalSections={totalSteps}
sectionName={sectionName}
/>
)}
</div>
);
};
// Rating Scale Question Component
export const RatingScaleQuestion: React.FC<{
question: string;
leftLabel: string;
rightLabel: string;
value?: number;
onChange: (value: number) => void;
onBack?: () => void;
onNext: () => void;
onSkip?: () => void;
currentStep?: number;
totalSteps?: number;
sectionName?: string;
scale?: number;
}> = ({ question, leftLabel, rightLabel, value, onChange, onBack, onNext, onSkip, currentStep, totalSteps, sectionName, scale = 10 }) => {
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0 inline-flex flex-col justify-center items-center gap-9">
<div className="w-full max-w-[464px] min-w-[464px] flex flex-col justify-start items-start gap-12">
<div className="self-stretch flex flex-col justify-center items-center gap-8">
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate950 text-2xl font-medium font-['Neue_Montreal'] leading-normal">
{question}
</div>
<div className="inline-flex justify-center items-center gap-3">
<div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">
{leftLabel}
</div>
{Array.from({ length: scale }, (_, index) => {
const ratingValue = index + 1;
const isSelected = value === ratingValue;
return (
<button
key={ratingValue}
onClick={() => onChange(ratingValue)}
className={`w-12 h-12 relative rounded-[576.35px] overflow-hidden transition-colors ${
isSelected ? 'bg-Neutrals-NeutralSlate800' : 'bg-Neutrals-NeutralSlate100 hover:bg-neutral-200'
}`}
>
<div className={`absolute inset-0 flex items-center justify-center text-xl font-medium font-['Inter'] leading-7 ${
isSelected ? 'text-Neutrals-NeutralSlate0' : 'text-Neutrals-NeutralSlate950'
}`}>
{ratingValue}
</div>
</button>
);
})}
<div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">
{rightLabel}
</div>
</div>
</div>
<div className="self-stretch inline-flex justify-start items-start gap-2">
{onBack && (
<button
onClick={onBack}
className="h-12 px-8 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-neutral-200 transition-colors"
>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Back</div>
</div>
</button>
)}
<button
onClick={onNext}
disabled={!value}
className="flex-1 h-12 px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed hover:bg-orange-600 transition-colors"
>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Next</div>
</div>
</button>
</div>
</div>
{/* Step indicator */}
{currentStep && totalSteps && (
<div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] uppercase leading-none">
{currentStep} of {totalSteps}
</div>
</div>
)}
{/* Skip button */}
{onSkip && (
<button
onClick={onSkip}
className="px-3 py-1.5 right-[24px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden hover:bg-neutral-200 transition-colors"
>
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-none">Skip</div>
</button>
)}
{/* Progress bar */}
{currentStep && totalSteps && sectionName && (
<SectionProgressBar
currentSection={currentStep}
totalSections={totalSteps}
sectionName={sectionName}
/>
)}
</div>
);
};
// Yes/No Choice Component
export const YesNoChoice: React.FC<{
question: string;
value?: string;
onChange: (value: string) => void;
onBack?: () => void;
onNext: () => void;
onSkip?: () => void;
currentStep?: number;
totalSteps?: number;
sectionName?: string;
}> = ({ question, value, onChange, onBack, onNext, onSkip, currentStep, totalSteps, sectionName }) => {
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0 inline-flex flex-col justify-center items-center gap-9">
<div className="w-full max-w-[464px] min-w-[464px] flex flex-col justify-start items-start gap-12">
<div className="self-stretch flex flex-col justify-start items-start gap-8">
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate950 text-2xl font-medium font-['Neue_Montreal'] leading-normal">
{question}
</div>
<div className="self-stretch inline-flex justify-center items-center gap-3">
<button
onClick={() => onChange('No')}
className={`w-20 h-20 relative rounded-[999px] overflow-hidden transition-colors ${
value === 'No' ? 'bg-Neutrals-NeutralSlate800' : 'bg-Neutrals-NeutralSlate100 hover:bg-neutral-200'
}`}
>
<div className={`absolute inset-0 flex items-center justify-center text-base font-normal font-['Inter'] leading-normal ${
value === 'No' ? 'text-Neutrals-NeutralSlate0' : 'text-Neutrals-NeutralSlate950'
}`}>
No
</div>
</button>
<button
onClick={() => onChange('Yes')}
className={`w-20 h-20 relative rounded-[999px] overflow-hidden transition-colors ${
value === 'Yes' ? 'bg-Neutrals-NeutralSlate800' : 'bg-Neutrals-NeutralSlate100 hover:bg-neutral-200'
}`}
>
<div className={`absolute inset-0 flex items-center justify-center text-base font-normal font-['Inter'] leading-normal ${
value === 'Yes' ? 'text-Neutrals-NeutralSlate0' : 'text-Neutrals-NeutralSlate950'
}`}>
Yes
</div>
</button>
</div>
</div>
<div className="self-stretch inline-flex justify-start items-start gap-2">
{onBack && (
<button
onClick={onBack}
className="h-12 px-8 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-neutral-200 transition-colors"
>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Back</div>
</div>
</button>
)}
<button
onClick={onNext}
disabled={!value}
className="flex-1 h-12 px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed hover:bg-orange-600 transition-colors"
>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Next</div>
</div>
</button>
</div>
</div>
{/* Step indicator */}
{currentStep && totalSteps && (
<div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] uppercase leading-none">
{currentStep} of {totalSteps}
</div>
</div>
)}
{/* Skip button */}
{onSkip && (
<button
onClick={onSkip}
className="px-3 py-1.5 right-[24px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden hover:bg-neutral-200 transition-colors"
>
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-none">Skip</div>
</button>
)}
{/* Progress bar */}
{currentStep && totalSteps && sectionName && (
<SectionProgressBar
currentSection={currentStep}
totalSections={totalSteps}
sectionName={sectionName}
/>
)}
</div>
);
};
// Thank You Page Component
export const ThankYouPage: React.FC = () => {
return (
<div className="w-[1440px] bg-white inline-flex justify-start items-center overflow-hidden">
<div className="flex-1 h-[810px] px-32 py-48 bg-Neutrals-NeutralSlate0 flex justify-center items-center gap-2.5 overflow-hidden">
<div className="flex-1 max-w-[464px] inline-flex flex-col justify-start items-start gap-12">
<div className="self-stretch flex flex-col justify-start items-start gap-6">
<div className="w-12 h-12 relative bg-Brand-Orange rounded-xl outline outline-2 outline-offset-[-2px] outline-blue-400 overflow-hidden">
<div className="w-12 h-12 left-0 top-0 absolute bg-gradient-to-b from-white/0 to-white/10" />
<div className="left-[12px] top-[9.33px] absolute">
<AuditlyIcon />
</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-4">
<div className="self-stretch justify-start text-Neutrals-NeutralSlate800 text-5xl font-medium font-['Neue_Montreal'] leading-[48px]">
Thank you your form has been submitted!
</div>
<div className="self-stretch justify-center text-Neutrals-NeutralSlate500 text-base font-normal font-['Inter'] leading-normal">
Your responses have been recorded and your AI-powered performance report will be generated shortly.
</div>
</div>
</div>
</div>
</div>
<div className="flex-1 h-[810px] px-20 py-16 flex justify-center items-center gap-2.5 overflow-hidden">
<div className="flex-1 self-stretch origin-top-left rotate-180 rounded-3xl inline-flex flex-col justify-center items-center gap-2.5 overflow-hidden">
<img className="self-stretch flex-1" src="https://placehold.co/560x682" alt="Thank you" />
</div>
</div>
</div>
);
};

6
src/components/figma/FigmaQuestion.tsx
View File

@@ -104,7 +104,7 @@ export const FigmaQuestion: React.FC<FigmaQuestionProps> = ({
{onNext && (
<button
onClick={onNext}
className="px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden hover:bg-orange-600 transition-colors"
className="px-4 py-3.5 bg-[--Brand-Orange] rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden hover:bg-orange-600 transition-colors"
>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">
@@ -167,7 +167,7 @@ export const FigmaRatingScale: React.FC<{
<div
key={number}
onClick={() => onChange(number)}
className={`w-12 h-12 relative rounded-[576.35px] overflow-hidden cursor-pointer transition-colors ${isSelected ? 'bg-Brand-Orange' : 'bg-[--Neutrals-NeutralSlate100] hover:bg-Neutrals-NeutralSlate200'
className={`w-12 h-12 relative rounded-[576.35px] overflow-hidden cursor-pointer transition-colors ${isSelected ? 'bg-[--Brand-Orange]' : 'bg-[--Neutrals-NeutralSlate100] hover:bg-Neutrals-NeutralSlate200'
}`}
>
<div className={`absolute inset-0 flex items-center justify-center text-xl font-medium font-['Inter'] leading-7 ${isSelected ? 'text-white' : 'text-Neutrals-NeutralSlate950'
@@ -266,7 +266,7 @@ export const FigmaNavigationButtons: React.FC<{
<button
onClick={onNext}
disabled={nextDisabled}
className="flex-1 h-12 px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed"
className="flex-1 h-12 px-4 py-3.5 bg-[--Brand-Orange] rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed"
>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Next</div>

424
src/components/onboarding/FigmaOnboardingComponents.tsx Normal file
View File

@@ -0,0 +1,424 @@
import React from 'react';
interface FigmaOnboardingIntroProps {
section: number;
totalSections: number;
title: string;
description: string;
onStart: () => void;
}
export const FigmaOnboardingIntro: React.FC<FigmaOnboardingIntroProps> = ({
section,
totalSections,
title,
description,
onStart
}) => {
return (
<div className="w-[1440px] bg-white inline-flex justify-start items-center overflow-hidden">
<div className="flex-1 h-[810px] px-32 py-48 bg-Neutrals-NeutralSlate0 flex justify-center items-center gap-2.5 overflow-hidden">
<div className="flex-1 max-w-[464px] inline-flex flex-col justify-start items-start gap-12">
<div className="self-stretch flex flex-col justify-start items-start gap-6">
<div className="w-12 h-12 relative bg-Brand-Orange rounded-xl outline outline-2 outline-offset-[-2px] outline-blue-400 overflow-hidden">
<div className="w-12 h-12 left-0 top-0 absolute bg-gradient-to-b from-white/0 to-white/10" />
<div className="left-[12px] top-[9.33px] absolute">
<svg width="24" height="30" viewBox="0 0 24 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" fillRule="evenodd" clipRule="evenodd" d="M2.57408 17.8128C3.11835 18.3639 3.11834 19.2575 2.57406 19.8087L2.54619 19.8369C2.00191 20.3881 1.11946 20.3881 0.57519 19.8369C0.030919 19.2857 0.0309274 18.3921 0.575208 17.841L0.603083 17.8128C1.14736 17.2616 2.02981 17.2616 2.57408 17.8128Z" fill="url(#paint0_linear_755_3218)" />
<path opacity="0.7" fillRule="evenodd" clipRule="evenodd" d="M9.12583 18.2379C9.66912 18.7901 9.66752 19.6837 9.12226 20.2338L5.2617 24.1291C4.71644 24.6792 3.83399 24.6776 3.2907 24.1255C2.74741 23.5733 2.74901 22.6797 3.29427 22.1296L7.15483 18.2343C7.70009 17.6842 8.58254 17.6858 9.12583 18.2379Z" fill="url(#paint1_linear_755_3218)" />
<defs>
<linearGradient id="paint0_linear_755_3218" x1="1.57463" y1="17.3994" x2="1.57463" y2="20.2503" gradientUnits="userSpaceOnUse">
<stop stopColor="white" stopOpacity="0.8" />
<stop offset="1" stopColor="white" stopOpacity="0.5" />
</linearGradient>
<linearGradient id="paint1_linear_755_3218" x1="6.20827" y1="17.8228" x2="6.20827" y2="24.5406" gradientUnits="userSpaceOnUse">
<stop stopColor="white" stopOpacity="0.8" />
<stop offset="1" stopColor="white" stopOpacity="0.5" />
</linearGradient>
</defs>
</svg>
</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-4">
<div className="px-3 py-1.5 bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] uppercase leading-none">
{section} of {totalSections}
</div>
</div>
<div className="self-stretch justify-start text-Neutrals-NeutralSlate800 text-5xl font-medium font-['Neue_Montreal'] leading-[48px]">
{title}
</div>
<div className="self-stretch justify-center text-Neutrals-NeutralSlate500 text-base font-normal font-['Inter'] leading-normal">
{description}
</div>
</div>
</div>
<button
onClick={onStart}
className="self-stretch px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 inline-flex justify-center items-center gap-1 overflow-hidden hover:bg-Brand-Orange/90 transition-colors"
>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Start</div>
</div>
</button>
</div>
</div>
<div className="flex-1 h-[810px] px-20 py-16 flex justify-center items-center gap-2.5 overflow-hidden">
<div className="flex-1 self-stretch origin-top-left rotate-180 rounded-3xl inline-flex flex-col justify-center items-center gap-2.5 overflow-hidden">
<img className="self-stretch flex-1 object-cover" src="https://placehold.co/560x682" alt="Onboarding illustration" />
</div>
</div>
</div>
);
};
interface FigmaOnboardingQuestionProps {
question: string;
placeholder?: string;
value: string;
onChange: (value: string) => void;
onBack: () => void;
onNext: () => void;
sectionPosition: number;
totalInSection: number;
sectionName: string;
canProceed: boolean;
canSkip?: boolean;
rows?: number;
}
export const FigmaOnboardingQuestion: React.FC<FigmaOnboardingQuestionProps> = ({
question,
placeholder = "Type your answer....",
value,
onChange,
onBack,
onNext,
sectionPosition,
totalInSection,
sectionName,
canProceed,
canSkip = true,
rows = 6
}) => {
// Generate progress dots
const renderProgressDots = () => {
const dots = [];
for (let i = 1; i <= 7; i++) {
if (i === sectionPosition) {
dots.push(
<svg key={i} width="24" height="4" viewBox="0 0 24 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="4" rx="2" fill="var(--Brand-Orange, #3399FF)" />
</svg>
);
} else {
dots.push(
<svg key={i} width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="4" height="4" rx="2" fill="var(--Neutrals-NeutralSlate300, #D5D7DA)" />
</svg>
);
}
}
return dots;
};
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0 inline-flex flex-col justify-center items-center gap-36">
<div className="w-full max-w-[464px] min-w-[464px] flex flex-col justify-start items-start gap-12">
<div className="self-stretch flex flex-col justify-start items-start gap-8">
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate950 text-2xl font-medium font-['Neue_Montreal'] leading-normal">
{question}
</div>
<div className="self-stretch min-h-40 p-5 relative bg-Neutrals-NeutralSlate100 rounded-xl inline-flex justify-start items-start gap-2.5">
<textarea
value={value}
onChange={(e) => onChange(e.target.value)}
className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-base font-normal font-['Inter'] leading-normal placeholder:text-Neutrals-NeutralSlate500 outline-none resize-none"
placeholder={placeholder}
rows={rows}
/>
<div className="w-3 h-3 absolute right-3 bottom-3">
<div className="w-2 h-2 absolute top-0.5 left-0.5 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
<div className="w-1 h-1 absolute top-2 left-2 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
</div>
</div>
</div>
<div className="self-stretch inline-flex justify-start items-start gap-2">
<button
onClick={onBack}
className="h-12 px-8 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-Neutrals-NeutralSlate200 transition-colors"
>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Back</div>
</div>
</button>
<button
onClick={onNext}
disabled={!canProceed}
className="flex-1 h-12 px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed hover:bg-Brand-Orange/90 transition-colors"
>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Next</div>
</div>
</button>
</div>
</div>
<div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] uppercase leading-none">
{sectionPosition} of {totalInSection}
</div>
</div>
{canSkip && (
<div className="px-3 py-1.5 right-[24px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden cursor-pointer hover:bg-Neutrals-NeutralSlate200 transition-colors">
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-none">Skip</div>
</div>
)}
<div className="w-[464px] max-w-[464px] min-w-[464px] left-[488px] top-[24px] absolute flex flex-col justify-start items-center gap-4">
<div className="p-4 bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
{renderProgressDots()}
</div>
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate500 text-base font-medium font-['Neue_Montreal'] leading-normal">
{sectionName}
</div>
</div>
</div>
);
};
interface FigmaOnboardingMultipleChoiceProps {
question: string;
options: string[];
selectedValue: string;
onSelect: (value: string) => void;
onBack: () => void;
onNext: () => void;
sectionPosition: number;
totalInSection: number;
sectionName: string;
canSkip?: boolean;
}
export const FigmaOnboardingMultipleChoice: React.FC<FigmaOnboardingMultipleChoiceProps> = ({
question,
options,
selectedValue,
onSelect,
onBack,
onNext,
sectionPosition,
totalInSection,
sectionName,
canSkip = true
}) => {
// Generate progress dots
const renderProgressDots = () => {
const dots = [];
for (let i = 1; i <= 7; i++) {
if (i === sectionPosition) {
dots.push(
<div key={i} className="w-6 h-1 bg-Brand-Orange rounded-3xl" />
);
} else {
dots.push(
<svg key={i} width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="4" height="4" rx="2" fill="var(--Neutrals-NeutralSlate300, #D5D7DA)" />
</svg>
);
}
}
return dots;
};
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0 inline-flex flex-col justify-center items-center gap-9">
<div className="w-full max-w-[464px] min-w-[464px] flex flex-col justify-start items-start gap-12">
<div className="self-stretch flex flex-col justify-start items-start gap-8">
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate950 text-2xl font-medium font-['Neue_Montreal'] leading-normal">
{question}
</div>
<div className="self-stretch inline-flex justify-center items-center gap-3">
{options.map((option, index) => (
<button
key={option}
onClick={() => onSelect(option)}
className={`flex-1 h-20 relative rounded-[999px] overflow-hidden transition-colors ${
selectedValue === option
? 'bg-Neutrals-NeutralSlate800'
: 'bg-Neutrals-NeutralSlate100 hover:bg-Neutrals-NeutralSlate200'
}`}
>
<div className={`absolute inset-0 flex items-center justify-center text-center text-base font-normal font-['Inter'] leading-normal ${
selectedValue === option
? 'text-Neutrals-NeutralSlate0'
: 'text-Neutrals-NeutralSlate950'
}`}>
{option}
</div>
</button>
))}
</div>
</div>
<div className="self-stretch inline-flex justify-start items-start gap-2">
<button
onClick={onBack}
className="h-12 px-8 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-Neutrals-NeutralSlate200 transition-colors"
>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Back</div>
</div>
</button>
<button
onClick={onNext}
disabled={!selectedValue}
className="flex-1 h-12 px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed hover:bg-Brand-Orange/90 transition-colors"
>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Next</div>
</div>
</button>
</div>
</div>
<div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] uppercase leading-none">
{sectionPosition} of {totalInSection}
</div>
</div>
{canSkip && (
<div className="px-3 py-1.5 right-[24px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden cursor-pointer hover:bg-Neutrals-NeutralSlate200 transition-colors">
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-none">Skip</div>
</div>
)}
<div className="w-[464px] max-w-[464px] min-w-[464px] left-[488px] top-[24px] absolute flex flex-col justify-start items-center gap-4">
<div className="p-4 bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
{renderProgressDots()}
</div>
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate500 text-base font-medium font-['Neue_Montreal'] leading-normal">
{sectionName}
</div>
</div>
</div>
);
};
interface FigmaOnboardingFormProps {
companyName: string;
yourName: string;
companyLogo?: string;
onCompanyNameChange: (value: string) => void;
onYourNameChange: (value: string) => void;
onLogoUpload?: (file: File) => void;
onNext: () => void;
canProceed: boolean;
}
export const FigmaOnboardingForm: React.FC<FigmaOnboardingFormProps> = ({
companyName,
yourName,
companyLogo,
onCompanyNameChange,
onYourNameChange,
onLogoUpload,
onNext,
canProceed
}) => {
const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (file && onLogoUpload) {
onLogoUpload(file);
}
};
return (
<div className="w-[1440px] h-[810px] px-[488px] py-32 bg-Neutrals-NeutralSlate0 inline-flex flex-col justify-center items-center gap-9">
<div className="w-full max-w-[464px] min-w-[464px] flex flex-col justify-start items-start gap-12">
<div className="self-stretch flex flex-col justify-start items-start gap-8">
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate950 text-2xl font-medium font-['Neue_Montreal'] leading-normal">
Company Details
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-6">
<div className="self-stretch flex flex-col justify-start items-start gap-2">
<div className="self-stretch inline-flex justify-start items-center gap-0.5">
<div className="justify-start text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight">Company Logo</div>
</div>
<div className="self-stretch p-4 rounded-3xl outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex justify-start items-center gap-4">
<div className="w-16 h-16 relative bg-gray-200 rounded-[250px]">
<div className="w-16 h-16 left-0 top-0 absolute opacity-10 rounded-[250px]" />
{companyLogo && (
<img src={companyLogo} alt="Company logo" className="w-16 h-16 rounded-[250px] object-cover" />
)}
</div>
<div className="inline-flex flex-col justify-start items-start gap-4">
<div className="self-stretch inline-flex justify-start items-center gap-3">
<label className="flex justify-start items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity">
<div>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 2H2M12 8.66667L8 4.66667M8 4.66667L4 8.66667M8 4.66667V14" stroke="var(--Neutrals-NeutralSlate950, #0A0D12)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
<div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Upload image</div>
<input
type="file"
accept="image/*"
onChange={handleFileUpload}
className="hidden"
/>
</label>
</div>
</div>
</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-2">
<div className="self-stretch inline-flex justify-start items-center gap-0.5">
<div className="justify-start text-Neutrals-NeutralSlate900 text-sm font-normal font-['Inter'] leading-tight">Your Name</div>
<div className="justify-start text-Brand-Orange text-sm font-medium font-['Inter'] leading-tight">*</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-1">
<div className="self-stretch px-4 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
<input
type="text"
value={yourName}
onChange={(e) => onYourNameChange(e.target.value)}
className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight placeholder:text-Neutrals-NeutralSlate500 outline-none"
placeholder="John Doe"
/>
</div>
</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-2">
<div className="self-stretch inline-flex justify-start items-center gap-0.5">
<div className="justify-start text-Neutrals-NeutralSlate900 text-sm font-normal font-['Inter'] leading-tight">Company Name</div>
<div className="justify-start text-Brand-Orange text-sm font-medium font-['Inter'] leading-tight">*</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-1">
<div className="self-stretch px-4 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
<input
type="text"
value={companyName}
onChange={(e) => onCompanyNameChange(e.target.value)}
className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight placeholder:text-Neutrals-NeutralSlate500 outline-none"
placeholder="Doe Enterprises"
/>
</div>
</div>
</div>
</div>
</div>
<button
onClick={onNext}
disabled={!canProceed}
className="self-stretch h-12 px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 inline-flex justify-center items-center gap-1 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed hover:bg-Brand-Orange/90 transition-colors"
>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Next</div>
</div>
</button>
</div>
</div>
);
};

2
src/components/ui/ImageUpload.tsx
View File

@@ -163,7 +163,7 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
)}
{dragOver && (
<div className="absolute inset-0 bg-Brand-Orange bg-opacity-20 flex items-center justify-center">
<div className="absolute inset-0 bg-[--Brand-Orange] bg-opacity-20 flex items-center justify-center">
<span className="text-Brand-Orange text-xs font-medium">Drop image</span>
</div>
)}