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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user