website refactor
This commit is contained in:
@@ -2,16 +2,23 @@
|
||||
|
||||
import { useState } from 'react';
|
||||
import type { DriverProfileDriverSummaryViewModel } from '@/lib/view-models/DriverProfileViewModel';
|
||||
import Card from '../ui/Card';
|
||||
import Button from '../ui/Button';
|
||||
import Input from '../ui/Input';
|
||||
import { Card } from '@/ui/Card';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Input } from '@/ui/Input';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Select } from '@/ui/Select';
|
||||
import { Toggle } from '@/ui/Toggle';
|
||||
import { TextArea } from '@/ui/TextArea';
|
||||
import { Checkbox } from '@/ui/Checkbox';
|
||||
|
||||
interface ProfileSettingsProps {
|
||||
driver: DriverProfileDriverSummaryViewModel;
|
||||
onSave?: (updates: { bio?: string; country?: string }) => void;
|
||||
}
|
||||
|
||||
export default function ProfileSettings({ driver, onSave }: ProfileSettingsProps) {
|
||||
export function ProfileSettings({ driver, onSave }: ProfileSettingsProps) {
|
||||
const [bio, setBio] = useState(driver.bio || '');
|
||||
const [nationality, setNationality] = useState(driver.country);
|
||||
const [favoriteCarClass, setFavoriteCarClass] = useState('GT3');
|
||||
@@ -27,147 +34,122 @@ export default function ProfileSettings({ driver, onSave }: ProfileSettingsProps
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Stack gap={6}>
|
||||
<Card>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Profile Information</h3>
|
||||
<Heading level={3} mb={4}>Profile Information</Heading>
|
||||
|
||||
<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>
|
||||
<Stack gap={4}>
|
||||
<TextArea
|
||||
label="Bio"
|
||||
value={bio}
|
||||
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setBio(e.target.value)}
|
||||
rows={4}
|
||||
placeholder="Tell us about yourself..."
|
||||
/>
|
||||
|
||||
<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>
|
||||
<Input
|
||||
label="Nationality"
|
||||
type="text"
|
||||
value={nationality}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNationality(e.target.value)}
|
||||
placeholder="e.g., US, GB, DE"
|
||||
maxLength={2}
|
||||
/>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Racing Preferences</h3>
|
||||
<Heading level={3} mb={4}>Racing Preferences</Heading>
|
||||
|
||||
<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>
|
||||
<Stack gap={4}>
|
||||
<Select
|
||||
label="Favorite Car Class"
|
||||
value={favoriteCarClass}
|
||||
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setFavoriteCarClass(e.target.value)}
|
||||
options={[
|
||||
{ value: 'GT3', label: 'GT3' },
|
||||
{ value: 'GT4', label: 'GT4' },
|
||||
{ value: 'Formula', label: 'Formula' },
|
||||
{ value: 'LMP2', label: 'LMP2' },
|
||||
{ value: 'Touring', label: 'Touring Cars' },
|
||||
{ value: 'NASCAR', label: 'NASCAR' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<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>
|
||||
<Select
|
||||
label="Favorite Series Type"
|
||||
value={favoriteSeries}
|
||||
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setFavoriteSeries(e.target.value)}
|
||||
options={[
|
||||
{ value: 'Sprint', label: 'Sprint' },
|
||||
{ value: 'Endurance', label: 'Endurance' },
|
||||
{ value: 'Mixed', label: 'Mixed' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<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>
|
||||
<Select
|
||||
label="Competitive Level"
|
||||
value={competitiveLevel}
|
||||
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setCompetitiveLevel(e.target.value)}
|
||||
options={[
|
||||
{ value: 'casual', label: 'Casual - Just for fun' },
|
||||
{ value: 'competitive', label: 'Competitive - Aiming to win' },
|
||||
{ value: 'professional', label: 'Professional - Esports focused' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-2">Preferred Regions</label>
|
||||
<div className="space-y-2">
|
||||
<Stack gap={2}>
|
||||
<Heading level={4}>Preferred Regions</Heading>
|
||||
<Stack gap={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>
|
||||
<Checkbox
|
||||
key={region}
|
||||
label={region}
|
||||
checked={preferredRegions.includes(region)}
|
||||
onChange={(checked) => {
|
||||
if (checked) {
|
||||
setPreferredRegions([...preferredRegions, region]);
|
||||
} else {
|
||||
setPreferredRegions(preferredRegions.filter(r => r !== region));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Privacy Settings</h3>
|
||||
<Heading level={3} mb={4}>Privacy Settings</Heading>
|
||||
|
||||
<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>
|
||||
<Stack gap={0}>
|
||||
<Toggle
|
||||
checked={true}
|
||||
onChange={() => {}}
|
||||
label="Show profile to other drivers"
|
||||
/>
|
||||
<Toggle
|
||||
checked={true}
|
||||
onChange={() => {}}
|
||||
label="Show race history"
|
||||
/>
|
||||
<Toggle
|
||||
checked={true}
|
||||
onChange={() => {}}
|
||||
label="Allow friend requests"
|
||||
/>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Button variant="primary" onClick={handleSave} className="flex-1">
|
||||
<Box display="flex" gap={3}>
|
||||
<Button variant="primary" onClick={handleSave} fullWidth>
|
||||
Save Changes
|
||||
</Button>
|
||||
<Button variant="secondary" className="flex-1">
|
||||
<Button variant="secondary" fullWidth>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user