79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { Panel } from '@/ui/Panel';
|
|
import { Select } from '@/ui/Select';
|
|
import { Toggle } from '@/ui/Toggle';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { ProfileStatsGroup, ProfileStat } from '@/ui/ProfileHero';
|
|
import React from 'react';
|
|
|
|
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 (
|
|
<Panel title="Racing Preferences">
|
|
<Stack gap={6}>
|
|
<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' },
|
|
]}
|
|
/>
|
|
|
|
<Box paddingTop={2}>
|
|
<Stack gap={3}>
|
|
<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>
|
|
</Box>
|
|
</Stack>
|
|
</Panel>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Panel title="Racing Preferences">
|
|
<ProfileStatsGroup>
|
|
<ProfileStat label="Car Class" value={preferences.favoriteCarClass} intent="primary" />
|
|
<ProfileStat label="Level" value={preferences.competitiveLevel} intent="telemetry" />
|
|
<ProfileStat label="Visibility" value={preferences.showProfile ? 'Public' : 'Private'} intent="low" />
|
|
</ProfileStatsGroup>
|
|
</Panel>
|
|
);
|
|
}
|