wip
This commit is contained in:
173
apps/website/components/drivers/ProfileSettings.tsx
Normal file
173
apps/website/components/drivers/ProfileSettings.tsx
Normal file
@@ -0,0 +1,173 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { DriverDTO } from '@gridpilot/racing/application/mappers/EntityMappers';
|
||||
import Card from '../ui/Card';
|
||||
import Button from '../ui/Button';
|
||||
import Input from '../ui/Input';
|
||||
|
||||
interface ProfileSettingsProps {
|
||||
driver: DriverDTO;
|
||||
onSave?: (updates: Partial<DriverDTO>) => void;
|
||||
}
|
||||
|
||||
export default function ProfileSettings({ driver, onSave }: ProfileSettingsProps) {
|
||||
const [bio, setBio] = useState(driver.bio || '');
|
||||
const [nationality, setNationality] = useState(driver.country);
|
||||
const [favoriteCarClass, setFavoriteCarClass] = useState('GT3');
|
||||
const [favoriteSeries, setFavoriteSeries] = useState('Endurance');
|
||||
const [competitiveLevel, setCompetitiveLevel] = useState('competitive');
|
||||
const [preferredRegions, setPreferredRegions] = useState<string[]>(['EU']);
|
||||
|
||||
const handleSave = () => {
|
||||
onSave?.({
|
||||
bio,
|
||||
country: nationality
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Profile Information</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-2">Bio</label>
|
||||
<textarea
|
||||
value={bio}
|
||||
onChange={(e) => setBio(e.target.value)}
|
||||
className="w-full px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-blue focus:border-transparent resize-none"
|
||||
rows={4}
|
||||
placeholder="Tell us about yourself..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-2">Nationality</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={nationality}
|
||||
onChange={(e) => setNationality(e.target.value)}
|
||||
placeholder="e.g., US, GB, DE"
|
||||
maxLength={2}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Racing Preferences</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-2">Favorite Car Class</label>
|
||||
<select
|
||||
value={favoriteCarClass}
|
||||
onChange={(e) => setFavoriteCarClass(e.target.value)}
|
||||
className="w-full px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-blue focus:border-transparent"
|
||||
>
|
||||
<option value="GT3">GT3</option>
|
||||
<option value="GT4">GT4</option>
|
||||
<option value="Formula">Formula</option>
|
||||
<option value="LMP2">LMP2</option>
|
||||
<option value="Touring">Touring Cars</option>
|
||||
<option value="NASCAR">NASCAR</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-2">Favorite Series Type</label>
|
||||
<select
|
||||
value={favoriteSeries}
|
||||
onChange={(e) => setFavoriteSeries(e.target.value)}
|
||||
className="w-full px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-blue focus:border-transparent"
|
||||
>
|
||||
<option value="Sprint">Sprint</option>
|
||||
<option value="Endurance">Endurance</option>
|
||||
<option value="Mixed">Mixed</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-2">Competitive Level</label>
|
||||
<select
|
||||
value={competitiveLevel}
|
||||
onChange={(e) => setCompetitiveLevel(e.target.value)}
|
||||
className="w-full px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-blue focus:border-transparent"
|
||||
>
|
||||
<option value="casual">Casual - Just for fun</option>
|
||||
<option value="competitive">Competitive - Aiming to win</option>
|
||||
<option value="professional">Professional - Esports focused</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-2">Preferred Regions</label>
|
||||
<div className="space-y-2">
|
||||
{['NA', 'EU', 'ASIA', 'OCE'].map(region => (
|
||||
<label key={region} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferredRegions.includes(region)}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setPreferredRegions([...preferredRegions, region]);
|
||||
} else {
|
||||
setPreferredRegions(preferredRegions.filter(r => r !== region));
|
||||
}
|
||||
}}
|
||||
className="w-4 h-4 bg-deep-graphite border-charcoal-outline rounded text-primary-blue focus:ring-primary-blue"
|
||||
/>
|
||||
<span className="text-white text-sm">{region}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Privacy Settings</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
<label className="flex items-center justify-between cursor-pointer">
|
||||
<span className="text-white text-sm">Show profile to other drivers</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
defaultChecked
|
||||
className="w-4 h-4 bg-deep-graphite border-charcoal-outline rounded text-primary-blue focus:ring-primary-blue"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center justify-between cursor-pointer">
|
||||
<span className="text-white text-sm">Show race history</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
defaultChecked
|
||||
className="w-4 h-4 bg-deep-graphite border-charcoal-outline rounded text-primary-blue focus:ring-primary-blue"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center justify-between cursor-pointer">
|
||||
<span className="text-white text-sm">Allow friend requests</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
defaultChecked
|
||||
className="w-4 h-4 bg-deep-graphite border-charcoal-outline rounded text-primary-blue focus:ring-primary-blue"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Button variant="primary" onClick={handleSave} className="flex-1">
|
||||
Save Changes
|
||||
</Button>
|
||||
<Button variant="secondary" className="flex-1">
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user