salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 2, 2.1 and 2.2 complete

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-05 08:17:56 +00:00
parent abc6c011ea
commit cb8e747387
14 changed files with 1834 additions and 552 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
frontend/src/components/onboarding/OnboardingWizard.tsx
View File

@@ -52,7 +52,7 @@ export interface WizardData {
const STEPS: WizardStep[] = [
{ id: 1, title: 'Welcome', description: 'Get started with IGNY8' },
{ id: 2, title: 'Add Site', description: 'Create your first site' },
{ id: 3, title: 'Connect', description: 'Install WordPress plugin', isOptional: true },
{ id: 3, title: 'Connect', description: 'Connect your site', isOptional: true },
{ id: 4, title: 'Keywords', description: 'Add target keywords', isOptional: true },
{ id: 5, title: 'Complete', description: 'You\'re all set!' },
];
@@ -146,6 +146,8 @@ export default function OnboardingWizard({ onComplete, onSkip }: OnboardingWizar
<Step1Welcome
onNext={handleNext}
onSkip={handleSkipAll}
currentStep={currentStep}
totalSteps={STEPS.length}
/>
);
case 2:
@@ -156,6 +158,8 @@ export default function OnboardingWizard({ onComplete, onSkip }: OnboardingWizar
onNext={handleNext}
onBack={handleBack}
setIsLoading={setIsLoading}
currentStep={currentStep}
totalSteps={STEPS.length}
/>
);
case 3:
@@ -166,6 +170,8 @@ export default function OnboardingWizard({ onComplete, onSkip }: OnboardingWizar
onNext={handleNext}
onBack={handleBack}
onSkip={handleSkipStep}
currentStep={currentStep}
totalSteps={STEPS.length}
/>
);
case 4:
@@ -176,6 +182,8 @@ export default function OnboardingWizard({ onComplete, onSkip }: OnboardingWizar
onNext={handleNext}
onBack={handleBack}
onSkip={handleSkipStep}
currentStep={currentStep}
totalSteps={STEPS.length}
/>
);
case 5:
@@ -184,6 +192,8 @@ export default function OnboardingWizard({ onComplete, onSkip }: OnboardingWizar
data={wizardData}
onComplete={handleComplete}
isLoading={isLoading}
currentStep={currentStep}
totalSteps={STEPS.length}
/>
);
default:
@@ -192,86 +202,58 @@ export default function OnboardingWizard({ onComplete, onSkip }: OnboardingWizar
};
return (
<div className="w-full max-w-3xl mx-auto">
<Card className="w-full bg-white dark:bg-gray-900 rounded-2xl shadow-lg overflow-hidden">
{/* Header */}
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="size-10 rounded-xl bg-gradient-to-br from-brand-500 to-brand-600 flex items-center justify-center text-white">
<BoltIcon className="h-5 w-5" />
</div>
<div>
<h2 className="text-lg font-bold text-gray-900 dark:text-white">
Getting Started
</h2>
<p className="text-sm text-gray-500 dark:text-gray-400">
Step {currentStep} of {STEPS.length}
</p>
</div>
</div>
<IconButton
variant="ghost"
size="sm"
onClick={handleSkipAll}
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
icon={<CloseIcon className="w-5 h-5" />}
/>
</div>
{/* Progress Bar */}
<div className="mt-4">
<div className="flex items-center justify-between mb-2">
{STEPS.map((step) => (
<div className="w-full max-w-6xl mx-auto">
{/* Progress Steps - Clean horizontal stepper */}
<div className="mb-8">
<div className="flex items-center justify-between">
{STEPS.map((step, index) => (
<React.Fragment key={step.id}>
<div className="flex flex-col items-center">
<div
key={step.id}
className={`flex items-center ${step.id < STEPS.length ? 'flex-1' : ''}`}
className={`size-12 rounded-full flex items-center justify-center text-base font-semibold transition-all ${
step.id < currentStep
? 'bg-success-500 text-white shadow-md'
: step.id === currentStep
? 'bg-brand-500 text-white shadow-lg ring-4 ring-brand-100 dark:ring-brand-900/50'
: 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500'
}`}
>
<div
className={`size-8 rounded-full flex items-center justify-center text-sm font-medium transition-colors ${
step.id < currentStep
? 'bg-success-500 text-white'
: step.id === currentStep
? 'bg-brand-500 text-white'
: 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
}`}
>
{step.id < currentStep ? (
<CheckCircleIcon className="w-5 h-5" />
) : (
step.id
)}
</div>
{step.id < STEPS.length && (
<div
className={`h-1 flex-1 mx-2 rounded transition-colors ${
step.id < currentStep
? 'bg-success-500'
: 'bg-gray-200 dark:bg-gray-700'
}`}
/>
{step.id < currentStep ? (
<CheckCircleIcon className="w-6 h-6" />
) : (
step.id
)}
</div>
))}
</div>
<div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
{STEPS.map((step) => (
<span
key={step.id}
className={`text-center ${
step.id === currentStep ? 'text-brand-600 dark:text-brand-400 font-medium' : ''
className={`mt-2 text-sm font-medium text-center ${
step.id === currentStep
? 'text-brand-600 dark:text-brand-400'
: step.id < currentStep
? 'text-success-600 dark:text-success-400'
: 'text-gray-400 dark:text-gray-500'
}`}
style={{ width: `${100 / STEPS.length}%` }}
>
{step.title}
</span>
))}
</div>
</div>
</div>
{index < STEPS.length - 1 && (
<div
className={`flex-1 h-1.5 mx-4 rounded-full transition-colors ${
step.id < currentStep
? 'bg-success-500'
: 'bg-gray-200 dark:bg-gray-700'
}`}
/>
)}
</React.Fragment>
))}
</div>
</div>
{/* Step Content Card */}
<Card className="w-full bg-white dark:bg-gray-900 rounded-2xl shadow-xl overflow-hidden border border-gray-200 dark:border-gray-800">
{/* Step Content */}
<div className="p-6">
<div className="p-8 sm:p-10">
{renderStepContent()}
</div>
</Card>