website refactor
This commit is contained in:
@@ -86,25 +86,32 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
|
||||
};
|
||||
|
||||
return (
|
||||
// eslint-disable-next-line gridpilot-rules/no-raw-html-in-app
|
||||
<div className="space-y-6">
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<div>
|
||||
<Heading level={2} className="text-xl mb-1 flex items-center gap-2">
|
||||
<Camera className="w-5 h-5 text-primary-blue" />
|
||||
Create Your Racing Avatar
|
||||
</Heading>
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<p className="text-sm text-gray-400">
|
||||
Upload a photo and we will generate a unique racing avatar for you
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Photo Upload */}
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<div>
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<label className="block text-sm font-medium text-gray-300 mb-3">
|
||||
Upload Your Photo *
|
||||
</label>
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<div className="flex gap-6">
|
||||
{/* Upload Area */}
|
||||
<div
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<div
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className={`relative flex-1 flex flex-col items-center justify-center p-6 rounded-xl border-2 border-dashed cursor-pointer transition-all ${
|
||||
avatarInfo.facePhoto
|
||||
@@ -125,10 +132,12 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
|
||||
{avatarInfo.isValidating ? (
|
||||
<>
|
||||
<Loader2 className="w-10 h-10 text-primary-blue animate-spin mb-3" />
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<p className="text-sm text-gray-400">Validating photo...</p>
|
||||
</>
|
||||
) : avatarInfo.facePhoto ? (
|
||||
<>
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<div className="w-24 h-24 rounded-xl overflow-hidden mb-3 ring-2 ring-performance-green">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
@@ -137,18 +146,22 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<p className="text-sm text-performance-green flex items-center gap-1">
|
||||
<Check className="w-4 h-4" />
|
||||
Photo uploaded
|
||||
</p>
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<p className="text-xs text-gray-500 mt-1">Click to change</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Upload className="w-10 h-10 text-gray-500 mb-3" />
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<p className="text-sm text-gray-300 font-medium mb-1">
|
||||
Drop your photo here or click to upload
|
||||
</p>
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<p className="text-xs text-gray-500">
|
||||
JPEG or PNG, max 5MB
|
||||
</p>
|
||||
@@ -157,7 +170,9 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
|
||||
</div>
|
||||
|
||||
{/* Preview area */}
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<div className="w-32 flex flex-col items-center justify-center">
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<div className="w-24 h-24 rounded-xl bg-iron-gray border border-charcoal-outline flex items-center justify-center overflow-hidden">
|
||||
{(() => {
|
||||
const selectedAvatarUrl =
|
||||
@@ -175,6 +190,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<p className="text-xs text-gray-500 mt-2 text-center">Your avatar</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -184,11 +200,14 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
|
||||
</div>
|
||||
|
||||
{/* Suit Color Selection */}
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<div>
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<label className="block text-sm font-medium text-gray-300 mb-3 flex items-center gap-2">
|
||||
<Palette className="w-4 h-4" />
|
||||
Racing Suit Color
|
||||
</label>
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{SUIT_COLORS.map((color) => (
|
||||
<button
|
||||
@@ -211,6 +230,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<p className="mt-2 text-xs text-gray-500">
|
||||
Selected: {SUIT_COLORS.find(c => c.value === avatarInfo.suitColor)?.label}
|
||||
</p>
|
||||
@@ -244,9 +264,11 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
|
||||
{/* Generated Avatars */}
|
||||
{avatarInfo.generatedAvatars.length > 0 && (
|
||||
<div>
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<label className="block text-sm font-medium text-gray-300 mb-3">
|
||||
Choose Your Avatar *
|
||||
</label>
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{avatarInfo.generatedAvatars.map((url, index) => (
|
||||
<button
|
||||
|
||||
@@ -1,9 +1,15 @@
|
||||
import { useState, FormEvent } from 'react';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import { StepIndicator } from '@/ui/StepIndicator';
|
||||
import { PersonalInfoStep, PersonalInfo } from './PersonalInfoStep';
|
||||
import { PersonalInfoStep, PersonalInfo } from '@/ui/onboarding/PersonalInfoStep';
|
||||
import { AvatarStep, AvatarInfo } from './AvatarStep';
|
||||
import { OnboardingHeader } from '@/ui/onboarding/OnboardingHeader';
|
||||
import { OnboardingHelpText } from '@/ui/onboarding/OnboardingHelpText';
|
||||
import { OnboardingError } from '@/ui/onboarding/OnboardingError';
|
||||
import { OnboardingNavigation } from '@/ui/onboarding/OnboardingNavigation';
|
||||
import { OnboardingContainer } from '@/ui/onboarding/OnboardingContainer';
|
||||
import { OnboardingCardAccent } from '@/ui/onboarding/OnboardingCardAccent';
|
||||
import { OnboardingForm } from '@/ui/onboarding/OnboardingForm';
|
||||
|
||||
type OnboardingStep = 1 | 2;
|
||||
|
||||
@@ -173,28 +179,19 @@ export function OnboardingWizard({ onCompleted, onCompleteOnboarding, onGenerate
|
||||
const loading = false; // This would be managed by the parent component
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto px-4 py-10">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30 mx-auto mb-4">
|
||||
<span className="text-2xl">🏁</span>
|
||||
</div>
|
||||
<h1 className="text-4xl font-bold mb-2">Welcome to GridPilot</h1>
|
||||
<p className="text-gray-400">
|
||||
Let us set up your racing profile
|
||||
</p>
|
||||
</div>
|
||||
<OnboardingContainer>
|
||||
<OnboardingHeader
|
||||
title="Welcome to GridPilot"
|
||||
subtitle="Let us set up your racing profile"
|
||||
emoji="🏁"
|
||||
/>
|
||||
|
||||
{/* Progress Indicator */}
|
||||
<StepIndicator currentStep={step} />
|
||||
|
||||
{/* Form Card */}
|
||||
<Card className="relative overflow-hidden">
|
||||
{/* Background accent */}
|
||||
<div className="absolute top-0 right-0 w-40 h-40 bg-gradient-to-bl from-primary-blue/10 to-transparent rounded-bl-full" />
|
||||
<OnboardingCardAccent />
|
||||
|
||||
<form onSubmit={handleSubmit} className="relative">
|
||||
{/* Step 1: Personal Information */}
|
||||
<OnboardingForm onSubmit={handleSubmit}>
|
||||
{step === 1 && (
|
||||
<PersonalInfoStep
|
||||
personalInfo={personalInfo}
|
||||
@@ -204,7 +201,6 @@ export function OnboardingWizard({ onCompleted, onCompleteOnboarding, onGenerate
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Step 2: Avatar Generation */}
|
||||
{step === 2 && (
|
||||
<AvatarStep
|
||||
avatarInfo={avatarInfo}
|
||||
@@ -215,66 +211,19 @@ export function OnboardingWizard({ onCompleted, onCompleteOnboarding, onGenerate
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Error Message */}
|
||||
{errors.submit && (
|
||||
<div className="mt-6 flex items-start gap-3 p-4 rounded-xl bg-red-500/10 border border-red-500/30">
|
||||
<span className="text-red-400 flex-shrink-0 mt-0.5">⚠</span>
|
||||
<p className="text-sm text-red-400">{errors.submit}</p>
|
||||
</div>
|
||||
)}
|
||||
{errors.submit && <OnboardingError message={errors.submit} />}
|
||||
|
||||
{/* Navigation Buttons */}
|
||||
<div className="mt-8 flex items-center justify-between">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={handleBack}
|
||||
disabled={step === 1 || loading}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<span>←</span>
|
||||
Back
|
||||
</Button>
|
||||
|
||||
{step < 2 ? (
|
||||
<Button
|
||||
type="button"
|
||||
variant="primary"
|
||||
onClick={handleNext}
|
||||
disabled={loading}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
Continue
|
||||
<span>→</span>
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={loading || avatarInfo.selectedAvatarIndex === null}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<span className="animate-spin">⟳</span>
|
||||
Creating Profile...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span>✓</span>
|
||||
Complete Setup
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
<OnboardingNavigation
|
||||
onBack={handleBack}
|
||||
onNext={step < 2 ? handleNext : undefined}
|
||||
isLastStep={step === 2}
|
||||
canSubmit={avatarInfo.selectedAvatarIndex !== null}
|
||||
loading={loading}
|
||||
/>
|
||||
</OnboardingForm>
|
||||
</Card>
|
||||
|
||||
{/* Help Text */}
|
||||
<p className="text-center text-xs text-gray-500 mt-6">
|
||||
Your avatar will be AI-generated based on your photo and chosen suit color
|
||||
</p>
|
||||
</div>
|
||||
<OnboardingHelpText />
|
||||
</OnboardingContainer>
|
||||
);
|
||||
}
|
||||
@@ -1,151 +0,0 @@
|
||||
import { User, Clock, ChevronRight } from 'lucide-react';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Heading from '@/components/ui/Heading';
|
||||
import CountrySelect from '@/components/ui/CountrySelect';
|
||||
|
||||
export interface PersonalInfo {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
displayName: string;
|
||||
country: string;
|
||||
timezone: string;
|
||||
}
|
||||
|
||||
interface FormErrors {
|
||||
[key: string]: string | undefined;
|
||||
}
|
||||
|
||||
interface PersonalInfoStepProps {
|
||||
personalInfo: PersonalInfo;
|
||||
setPersonalInfo: (info: PersonalInfo) => void;
|
||||
errors: FormErrors;
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
const TIMEZONES = [
|
||||
{ value: 'America/New_York', label: 'Eastern Time (ET)' },
|
||||
{ value: 'America/Chicago', label: 'Central Time (CT)' },
|
||||
{ value: 'America/Denver', label: 'Mountain Time (MT)' },
|
||||
{ value: 'America/Los_Angeles', label: 'Pacific Time (PT)' },
|
||||
{ value: 'Europe/London', label: 'Greenwich Mean Time (GMT)' },
|
||||
{ value: 'Europe/Berlin', label: 'Central European Time (CET)' },
|
||||
{ value: 'Europe/Paris', label: 'Central European Time (CET)' },
|
||||
{ value: 'Australia/Sydney', label: 'Australian Eastern Time (AET)' },
|
||||
{ value: 'Asia/Tokyo', label: 'Japan Standard Time (JST)' },
|
||||
{ value: 'America/Sao_Paulo', label: 'Brasília Time (BRT)' },
|
||||
];
|
||||
|
||||
export function PersonalInfoStep({ personalInfo, setPersonalInfo, errors, loading }: PersonalInfoStepProps) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<Heading level={2} className="text-xl mb-1 flex items-center gap-2">
|
||||
<User className="w-5 h-5 text-primary-blue" />
|
||||
Personal Information
|
||||
</Heading>
|
||||
<p className="text-sm text-gray-400">
|
||||
Tell us a bit about yourself
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="firstName" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
First Name *
|
||||
</label>
|
||||
<Input
|
||||
id="firstName"
|
||||
type="text"
|
||||
value={personalInfo.firstName}
|
||||
onChange={(e) =>
|
||||
setPersonalInfo({ ...personalInfo, firstName: e.target.value })
|
||||
}
|
||||
error={!!errors.firstName}
|
||||
errorMessage={errors.firstName}
|
||||
placeholder="John"
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="lastName" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Last Name *
|
||||
</label>
|
||||
<Input
|
||||
id="lastName"
|
||||
type="text"
|
||||
value={personalInfo.lastName}
|
||||
onChange={(e) =>
|
||||
setPersonalInfo({ ...personalInfo, lastName: e.target.value })
|
||||
}
|
||||
error={!!errors.lastName}
|
||||
errorMessage={errors.lastName}
|
||||
placeholder="Racer"
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="displayName" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Display Name * <span className="text-gray-500 font-normal">(shown publicly)</span>
|
||||
</label>
|
||||
<Input
|
||||
id="displayName"
|
||||
type="text"
|
||||
value={personalInfo.displayName}
|
||||
onChange={(e) =>
|
||||
setPersonalInfo({ ...personalInfo, displayName: e.target.value })
|
||||
}
|
||||
error={!!errors.displayName}
|
||||
errorMessage={errors.displayName}
|
||||
placeholder="SpeedyRacer42"
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="country" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Country *
|
||||
</label>
|
||||
<CountrySelect
|
||||
value={personalInfo.country}
|
||||
onChange={(value) =>
|
||||
setPersonalInfo({ ...personalInfo, country: value })
|
||||
}
|
||||
error={!!errors.country}
|
||||
errorMessage={errors.country ?? ''}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="timezone" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Timezone
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Clock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500 z-10" />
|
||||
<select
|
||||
id="timezone"
|
||||
value={personalInfo.timezone}
|
||||
onChange={(e) =>
|
||||
setPersonalInfo({ ...personalInfo, timezone: e.target.value })
|
||||
}
|
||||
className="block w-full rounded-md border-0 px-4 py-3 pl-10 bg-iron-gray text-white shadow-sm ring-1 ring-inset ring-charcoal-outline placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-blue transition-all duration-150 sm:text-sm appearance-none cursor-pointer"
|
||||
disabled={loading}
|
||||
>
|
||||
<option value="">Select timezone</option>
|
||||
{TIMEZONES.map((tz) => (
|
||||
<option key={tz.value} value={tz.value}>
|
||||
{tz.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<ChevronRight className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500 rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user