wip
This commit is contained in:
@@ -1,7 +1,14 @@
|
||||
import { useRef, ChangeEvent } from 'react';
|
||||
import { Camera, Upload, Loader2, Sparkles, Palette, Check, User } from 'lucide-react';
|
||||
import Button from '@/ui/Button';
|
||||
import Heading from '@/ui/Heading';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Grid } from '@/ui/Grid';
|
||||
import { Surface } from '@/ui/Surface';
|
||||
import { Image } from '@/ui/Image';
|
||||
|
||||
export type RacingSuitColor =
|
||||
| 'red'
|
||||
@@ -86,40 +93,38 @@ 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" />
|
||||
<Stack gap={6}>
|
||||
<Box>
|
||||
<Heading level={2} icon={<Icon icon={Camera} size={5} color="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">
|
||||
<Text size="sm" color="text-gray-400" block mt={1}>
|
||||
Upload a photo and we will generate a unique racing avatar for you
|
||||
</p>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* 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">
|
||||
<Box>
|
||||
<Text as="label" size="sm" weight="medium" color="text-gray-300" block mb={3}>
|
||||
Upload Your Photo *
|
||||
</label>
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<div className="flex gap-6">
|
||||
</Text>
|
||||
<Stack direction="row" gap={6}>
|
||||
{/* Upload Area */}
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<div
|
||||
<Box
|
||||
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
|
||||
? 'border-performance-green bg-performance-green/5'
|
||||
: errors.facePhoto
|
||||
? 'border-red-500 bg-red-500/5'
|
||||
: 'border-charcoal-outline hover:border-primary-blue hover:bg-primary-blue/5'
|
||||
}`}
|
||||
flex={1}
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
align="center"
|
||||
justify="center"
|
||||
padding={6}
|
||||
rounded="xl"
|
||||
border
|
||||
borderColor={avatarInfo.facePhoto ? 'performance-green' : errors.facePhoto ? 'racing-red' : 'charcoal-outline'}
|
||||
backgroundColor={avatarInfo.facePhoto ? 'performance-green' : errors.facePhoto ? 'racing-red' : 'transparent'}
|
||||
opacity={avatarInfo.facePhoto || errors.facePhoto ? 0.1 : 1}
|
||||
className="border-2 border-dashed cursor-pointer transition-all hover:border-primary-blue hover:bg-primary-blue/5"
|
||||
position="relative"
|
||||
>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
@@ -130,91 +135,81 @@ 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>
|
||||
</>
|
||||
<Stack align="center" center>
|
||||
<Icon icon={Loader2} size={10} color="text-primary-blue" className="animate-spin mb-3" />
|
||||
<Text size="sm" color="text-gray-400">Validating photo...</Text>
|
||||
</Stack>
|
||||
) : 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
|
||||
<Stack align="center" center>
|
||||
<Box width={24} height={24} rounded="xl" className="overflow-hidden mb-3 ring-2 ring-performance-green">
|
||||
<Image
|
||||
src={avatarInfo.facePhoto}
|
||||
alt="Your photo"
|
||||
width={96}
|
||||
height={96}
|
||||
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>
|
||||
</>
|
||||
</Box>
|
||||
<Text size="sm" color="text-performance-green" block>
|
||||
<Stack direction="row" align="center" gap={1}>
|
||||
<Icon icon={Check} size={4} />
|
||||
Photo uploaded
|
||||
</Stack>
|
||||
</Text>
|
||||
<Text size="xs" color="text-gray-500" mt={1}>Click to change</Text>
|
||||
</Stack>
|
||||
) : (
|
||||
<>
|
||||
<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">
|
||||
<Stack align="center" center>
|
||||
<Icon icon={Upload} size={10} color="text-gray-500" className="mb-3" />
|
||||
<Text size="sm" color="text-gray-300" weight="medium" block 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">
|
||||
</Text>
|
||||
<Text size="xs" color="text-gray-500">
|
||||
JPEG or PNG, max 5MB
|
||||
</p>
|
||||
</>
|
||||
</Text>
|
||||
</Stack>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
{/* 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">
|
||||
<Stack width={32} align="center" center>
|
||||
<Surface variant="muted" rounded="xl" border width={24} height={24} display="flex" center className="overflow-hidden">
|
||||
{(() => {
|
||||
const selectedAvatarUrl =
|
||||
avatarInfo.selectedAvatarIndex !== null
|
||||
? avatarInfo.generatedAvatars[avatarInfo.selectedAvatarIndex]
|
||||
: undefined;
|
||||
if (!selectedAvatarUrl) {
|
||||
return <User className="w-8 h-8 text-gray-600" />;
|
||||
return <Icon icon={User} size={8} color="text-gray-600" />;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={selectedAvatarUrl} alt="Selected avatar" className="w-full h-full object-cover" />
|
||||
</>
|
||||
<Image src={selectedAvatarUrl} alt="Selected avatar" width={96} height={96} className="w-full h-full object-cover" />
|
||||
);
|
||||
})()}
|
||||
</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>
|
||||
</Surface>
|
||||
<Text size="xs" color="text-gray-500" mt={2} align="center" block>Your avatar</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
{errors.facePhoto && (
|
||||
<p className="mt-2 text-sm text-red-400">{errors.facePhoto}</p>
|
||||
<Text size="sm" color="text-error-red" block mt={2}>{errors.facePhoto}</Text>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
{/* 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">
|
||||
<Box>
|
||||
<Text as="label" size="sm" weight="medium" color="text-gray-300" block mb={3}>
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Icon icon={Palette} size={4} />
|
||||
Racing Suit Color
|
||||
</Stack>
|
||||
</Text>
|
||||
<Stack direction="row" wrap gap={2}>
|
||||
{SUIT_COLORS.map((color) => (
|
||||
<button
|
||||
<Button
|
||||
key={color.value}
|
||||
type="button"
|
||||
onClick={() => setAvatarInfo({ ...avatarInfo, suitColor: color.value })}
|
||||
className={`relative w-10 h-10 rounded-lg transition-all ${
|
||||
className={`relative w-10 h-10 rounded-lg transition-all p-0 ${
|
||||
avatarInfo.suitColor === color.value
|
||||
? 'ring-2 ring-primary-blue ring-offset-2 ring-offset-iron-gray scale-110'
|
||||
: 'hover:scale-105'
|
||||
@@ -223,79 +218,66 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
|
||||
title={color.label}
|
||||
>
|
||||
{avatarInfo.suitColor === color.value && (
|
||||
<Check className={`absolute inset-0 m-auto w-5 h-5 ${
|
||||
<Icon icon={Check} size={5} className={
|
||||
['white', 'yellow', 'cyan'].includes(color.value) ? 'text-gray-800' : 'text-white'
|
||||
}`} />
|
||||
} />
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
{/* eslint-disable-next-line gridpilot-rules/no-raw-html-in-app */}
|
||||
<p className="mt-2 text-xs text-gray-500">
|
||||
</Stack>
|
||||
<Text size="xs" color="text-gray-500" block mt={2}>
|
||||
Selected: {SUIT_COLORS.find(c => c.value === avatarInfo.suitColor)?.label}
|
||||
</p>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* Generate Button */}
|
||||
{avatarInfo.facePhoto && !errors.facePhoto && (
|
||||
<div>
|
||||
<Box>
|
||||
<Button
|
||||
type="button"
|
||||
variant="primary"
|
||||
onClick={onGenerateAvatars}
|
||||
disabled={avatarInfo.isGenerating || avatarInfo.isValidating}
|
||||
className="w-full flex items-center justify-center gap-2"
|
||||
fullWidth
|
||||
icon={avatarInfo.isGenerating ? <Icon icon={Loader2} size={5} className="animate-spin" /> : <Icon icon={Sparkles} size={5} />}
|
||||
>
|
||||
{avatarInfo.isGenerating ? (
|
||||
<>
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
Generating your avatars...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Sparkles className="w-5 h-5" />
|
||||
{avatarInfo.generatedAvatars.length > 0 ? 'Regenerate Avatars' : 'Generate Racing Avatars'}
|
||||
</>
|
||||
)}
|
||||
{avatarInfo.isGenerating ? 'Generating your avatars...' : (avatarInfo.generatedAvatars.length > 0 ? 'Regenerate Avatars' : 'Generate Racing Avatars')}
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* 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">
|
||||
<Box>
|
||||
<Text as="label" size="sm" weight="medium" color="text-gray-300" block 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">
|
||||
</Text>
|
||||
<Grid cols={3} gap={4}>
|
||||
{avatarInfo.generatedAvatars.map((url, index) => (
|
||||
<button
|
||||
<Button
|
||||
key={index}
|
||||
type="button"
|
||||
onClick={() => setAvatarInfo({ ...avatarInfo, selectedAvatarIndex: index })}
|
||||
className={`relative aspect-square rounded-xl overflow-hidden border-2 transition-all ${
|
||||
className={`relative aspect-square rounded-xl overflow-hidden border-2 transition-all p-0 ${
|
||||
avatarInfo.selectedAvatarIndex === index
|
||||
? 'border-primary-blue ring-2 ring-primary-blue/30 scale-105'
|
||||
: 'border-charcoal-outline hover:border-gray-500'
|
||||
}`}
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={url} alt={`Avatar option ${index + 1}`} className="w-full h-full object-cover" />
|
||||
<Image src={url} alt={`Avatar option ${index + 1}`} width={200} height={200} className="w-full h-full object-cover" />
|
||||
{avatarInfo.selectedAvatarIndex === index && (
|
||||
<div className="absolute top-2 right-2 w-6 h-6 rounded-full bg-primary-blue flex items-center justify-center">
|
||||
<Check className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<Box position="absolute" top={2} right={2} width={6} height={6} rounded="full" backgroundColor="primary-blue" display="flex" center>
|
||||
<Icon icon={Check} size={4} color="text-white" />
|
||||
</Box>
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</Grid>
|
||||
{errors.avatar && (
|
||||
<p className="mt-2 text-sm text-red-400">{errors.avatar}</p>
|
||||
<Text size="sm" color="text-error-red" block mt={2}>{errors.avatar}</Text>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ import { OnboardingHeader } from '@/components/onboarding/OnboardingHeader';
|
||||
import { OnboardingHelpText } from '@/components/onboarding/OnboardingHelpText';
|
||||
import { OnboardingNavigation } from '@/components/onboarding/OnboardingNavigation';
|
||||
import { PersonalInfo, PersonalInfoStep } from '@/components/onboarding/PersonalInfoStep';
|
||||
import Card from '@/ui/Card';
|
||||
import { Card } from '@/ui/Card';
|
||||
import { StepIndicator } from '@/ui/StepIndicator';
|
||||
import { FormEvent, useState } from 'react';
|
||||
import { AvatarInfo, AvatarStep } from './AvatarStep';
|
||||
@@ -190,7 +190,7 @@ export function OnboardingWizard({ onCompleted, onCompleteOnboarding, onGenerate
|
||||
|
||||
<StepIndicator currentStep={step} />
|
||||
|
||||
<Card className="relative overflow-hidden">
|
||||
<Card position="relative" overflow="hidden">
|
||||
<OnboardingCardAccent />
|
||||
|
||||
<OnboardingForm onSubmit={handleSubmit}>
|
||||
|
||||
@@ -1,68 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { OnboardingWizard } from './OnboardingWizard';
|
||||
import { routes } from '@/lib/routing/RouteConfig';
|
||||
import { completeOnboardingAction } from '@/app/onboarding/completeOnboardingAction';
|
||||
import { generateAvatarsAction } from '@/app/onboarding/generateAvatarsAction';
|
||||
import { useAuth } from '@/lib/auth/AuthContext';
|
||||
|
||||
export function OnboardingWizardClient() {
|
||||
const { session } = useAuth();
|
||||
|
||||
const handleCompleteOnboarding = async (input: {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
displayName: string;
|
||||
country: string;
|
||||
timezone?: string;
|
||||
}) => {
|
||||
try {
|
||||
const result = await completeOnboardingAction(input);
|
||||
|
||||
if (result.isErr()) {
|
||||
return { success: false, error: result.getError() };
|
||||
}
|
||||
|
||||
window.location.href = routes.protected.dashboard;
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { success: false, error: 'Failed to complete onboarding' };
|
||||
}
|
||||
};
|
||||
|
||||
const handleGenerateAvatars = async (params: {
|
||||
facePhotoData: string;
|
||||
suitColor: string;
|
||||
}) => {
|
||||
if (!session?.user?.userId) {
|
||||
return { success: false, error: 'Not authenticated' };
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await generateAvatarsAction({
|
||||
userId: session.user.userId,
|
||||
facePhotoData: params.facePhotoData,
|
||||
suitColor: params.suitColor,
|
||||
});
|
||||
|
||||
if (result.isErr()) {
|
||||
return { success: false, error: result.getError() };
|
||||
}
|
||||
|
||||
const data = result.unwrap();
|
||||
return { success: true, data };
|
||||
} catch (error) {
|
||||
return { success: false, error: 'Failed to generate avatars' };
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<OnboardingWizard
|
||||
onCompleted={() => {
|
||||
window.location.href = routes.protected.dashboard;
|
||||
}}
|
||||
onCompleteOnboarding={handleCompleteOnboarding}
|
||||
onGenerateAvatars={handleGenerateAvatars}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,13 @@
|
||||
import { User, Clock, ChevronRight } from 'lucide-react';
|
||||
import Input from '@/ui/Input';
|
||||
import Heading from '@/ui/Heading';
|
||||
import CountrySelect from '@/ui/CountrySelect';
|
||||
import { Input } from '@/ui/Input';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { CountrySelect } from '@/ui/CountrySelect';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Grid } from '@/ui/Grid';
|
||||
import { Select } from '@/ui/Select';
|
||||
|
||||
export interface PersonalInfo {
|
||||
firstName: string;
|
||||
@@ -37,115 +43,115 @@ const TIMEZONES = [
|
||||
|
||||
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" />
|
||||
<Stack gap={6}>
|
||||
<Box>
|
||||
<Heading level={2} icon={<Icon icon={User} size={5} color="text-primary-blue" />}>
|
||||
Personal Information
|
||||
</Heading>
|
||||
<p className="text-sm text-gray-400">
|
||||
<Text size="sm" color="text-gray-400" block mt={1}>
|
||||
Tell us a bit about yourself
|
||||
</p>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<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">
|
||||
<Grid cols={2} gap={4}>
|
||||
<Box>
|
||||
<Text as="label" htmlFor="firstName" size="sm" weight="medium" color="text-gray-300" block mb={2}>
|
||||
First Name *
|
||||
</label>
|
||||
</Text>
|
||||
<Input
|
||||
id="firstName"
|
||||
type="text"
|
||||
value={personalInfo.firstName}
|
||||
onChange={(e) =>
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setPersonalInfo({ ...personalInfo, firstName: e.target.value })
|
||||
}
|
||||
error={!!errors.firstName}
|
||||
variant={errors.firstName ? 'error' : 'default'}
|
||||
errorMessage={errors.firstName}
|
||||
placeholder="John"
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<div>
|
||||
<label htmlFor="lastName" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
<Box>
|
||||
<Text as="label" htmlFor="lastName" size="sm" weight="medium" color="text-gray-300" block mb={2}>
|
||||
Last Name *
|
||||
</label>
|
||||
</Text>
|
||||
<Input
|
||||
id="lastName"
|
||||
type="text"
|
||||
value={personalInfo.lastName}
|
||||
onChange={(e) =>
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setPersonalInfo({ ...personalInfo, lastName: e.target.value })
|
||||
}
|
||||
error={!!errors.lastName}
|
||||
variant={errors.lastName ? 'error' : 'default'}
|
||||
errorMessage={errors.lastName}
|
||||
placeholder="Racer"
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<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>
|
||||
<Box>
|
||||
<Text as="label" htmlFor="displayName" size="sm" weight="medium" color="text-gray-300" block mb={2}>
|
||||
Display Name * <Text color="text-gray-500" weight="normal">(shown publicly)</Text>
|
||||
</Text>
|
||||
<Input
|
||||
id="displayName"
|
||||
type="text"
|
||||
value={personalInfo.displayName}
|
||||
onChange={(e) =>
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setPersonalInfo({ ...personalInfo, displayName: e.target.value })
|
||||
}
|
||||
error={!!errors.displayName}
|
||||
variant={errors.displayName ? 'error' : 'default'}
|
||||
errorMessage={errors.displayName}
|
||||
placeholder="SpeedyRacer42"
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<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">
|
||||
<Grid cols={2} gap={4}>
|
||||
<Box>
|
||||
<Text as="label" htmlFor="country" size="sm" weight="medium" color="text-gray-300" block mb={2}>
|
||||
Country *
|
||||
</label>
|
||||
</Text>
|
||||
<CountrySelect
|
||||
value={personalInfo.country}
|
||||
onChange={(value) =>
|
||||
onChange={(value: string) =>
|
||||
setPersonalInfo({ ...personalInfo, country: value })
|
||||
}
|
||||
error={!!errors.country}
|
||||
errorMessage={errors.country ?? ''}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<div>
|
||||
<label htmlFor="timezone" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
<Box>
|
||||
<Text as="label" htmlFor="timezone" size="sm" weight="medium" color="text-gray-300" block 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
|
||||
</Text>
|
||||
<Box position="relative">
|
||||
<Box position="absolute" left={3} top="50%" style={{ transform: 'translateY(-50%)' }} zIndex={10}>
|
||||
<Icon icon={Clock} size={4} color="text-gray-500" />
|
||||
</Box>
|
||||
<Select
|
||||
id="timezone"
|
||||
value={personalInfo.timezone}
|
||||
onChange={(e) =>
|
||||
onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
|
||||
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"
|
||||
options={[
|
||||
{ value: '', label: 'Select timezone' },
|
||||
...TIMEZONES
|
||||
]}
|
||||
className="pl-10"
|
||||
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>
|
||||
/>
|
||||
<Box position="absolute" right={3} top="50%" style={{ transform: 'translateY(-50%)' }} pointerEvents="none">
|
||||
<Icon icon={ChevronRight} size={4} color="text-gray-500" className="rotate-90" />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user