mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-18 22:55:55 +01:00
parent b43a23a48c
commit aeaa43f4d3
179 changed files with 4736 additions and 6832 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
apps/website/components/profile/PreferencesPanel.tsx
View File

@@ -1,11 +1,10 @@
'use client';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/primitives/Stack';
import { Panel } from '@/ui/Panel';
import { Select } from '@/ui/Select';
import { Text } from '@/ui/Text';
import { Toggle } from '@/ui/Toggle';
import { ProfileStatsGroup, ProfileStat } from '@/ui/ProfileHero';
import React from 'react';
interface PreferencesPanelProps {
preferences: {
@@ -22,75 +21,54 @@ interface PreferencesPanelProps {
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>
<Panel title="Racing Preferences">
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
<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' },
]}
/>
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', paddingTop: '0.5rem' }}>
<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 })}
/>
</div>
</div>
</Panel>
);
}
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>
<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>
);
}