97 lines
3.4 KiB
TypeScript
97 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import { Card } from '@/ui/Card';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
import { Select } from '@/ui/Select';
|
|
import { Text } from '@/ui/Text';
|
|
import { Toggle } from '@/ui/Toggle';
|
|
|
|
interface PreferencesPanelProps {
|
|
preferences: {
|
|
favoriteCarClass: string;
|
|
favoriteSeries: string;
|
|
competitiveLevel: string;
|
|
showProfile: boolean;
|
|
showHistory: boolean;
|
|
};
|
|
isEditing?: boolean;
|
|
onUpdate?: (updates: Partial<PreferencesPanelProps['preferences']>) => void;
|
|
}
|
|
|
|
export function PreferencesPanel({ preferences, isEditing, onUpdate }: PreferencesPanelProps) {
|
|
if (isEditing) {
|
|
return (
|
|
<section aria-labelledby="preferences-heading">
|
|
<Card>
|
|
<Stack gap={6}>
|
|
<Heading level={3} id="preferences-heading" fontSize="1.125rem">Racing Preferences</Heading>
|
|
|
|
<Stack gap={4}>
|
|
<Select
|
|
label="Favorite Car Class"
|
|
value={preferences.favoriteCarClass}
|
|
onChange={(e) => onUpdate?.({ favoriteCarClass: e.target.value })}
|
|
options={[
|
|
{ value: 'GT3', label: 'GT3' },
|
|
{ value: 'GT4', label: 'GT4' },
|
|
{ value: 'Formula', label: 'Formula' },
|
|
{ value: 'LMP2', label: 'LMP2' },
|
|
]}
|
|
/>
|
|
<Select
|
|
label="Competitive Level"
|
|
value={preferences.competitiveLevel}
|
|
onChange={(e) => onUpdate?.({ competitiveLevel: e.target.value })}
|
|
options={[
|
|
{ value: 'casual', label: 'Casual' },
|
|
{ value: 'competitive', label: 'Competitive' },
|
|
{ value: 'professional', label: 'Professional' },
|
|
]}
|
|
/>
|
|
|
|
<Stack gap={3} pt={2}>
|
|
<Toggle
|
|
label="Public Profile"
|
|
checked={preferences.showProfile}
|
|
onChange={(checked) => onUpdate?.({ showProfile: checked })}
|
|
/>
|
|
<Toggle
|
|
label="Show Race History"
|
|
checked={preferences.showHistory}
|
|
onChange={(checked) => onUpdate?.({ showHistory: checked })}
|
|
/>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
</Card>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section aria-labelledby="preferences-heading">
|
|
<Card>
|
|
<Stack gap={6}>
|
|
<Heading level={3} id="preferences-heading" fontSize="1.125rem">Racing Preferences</Heading>
|
|
|
|
<Stack direction="row" gap={8} wrap>
|
|
<Stack gap={1}>
|
|
<Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em" uppercase>Car Class</Text>
|
|
<Text color="#d1d5db">{preferences.favoriteCarClass}</Text>
|
|
</Stack>
|
|
<Stack gap={1}>
|
|
<Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em" uppercase>Level</Text>
|
|
<Text color="#d1d5db" capitalize>{preferences.competitiveLevel}</Text>
|
|
</Stack>
|
|
<Stack gap={1}>
|
|
<Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em" uppercase>Visibility</Text>
|
|
<Text color="#d1d5db">{preferences.showProfile ? 'Public' : 'Private'}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
</Card>
|
|
</section>
|
|
);
|
|
}
|