website refactor

apps/website/components/profile/ProfileSettingsPanel.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Card } from '@/ui/Card';
+import { Button } from '@/ui/Button';
+import { Input } from '@/ui/Input';
+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';
+import { ProfileSection } from './ProfileSection';
+
+interface ProfileSettingsPanelProps {
+  driver: {
+    id: string;
+    name: string;
+    country: string;
+    bio?: string | null;
+  };
+  onSave?: (updates: { bio?: string; country?: string }) => void;
+}
+
+export function ProfileSettingsPanel({ driver, onSave }: ProfileSettingsPanelProps) {
+  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 (
+    <Stack gap={8}>
+      <ProfileSection 
+        title="Profile Information" 
+        description="Update your personal details and driver bio."
+      >
+        <Card>
+          <Stack gap={4}>
+            <TextArea
+              label="Bio"
+              value={bio}
+              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setBio(e.target.value)}
+              rows={4}
+              placeholder="Tell us about yourself..."
+            />
+
+            <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>
+      </ProfileSection>
+
+      <ProfileSection 
+        title="Racing Preferences" 
+        description="Help us tailor your experience by sharing your racing style."
+      >
+        <Card>
+          <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' },
+              ]}
+            />
+
+            <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' },
+              ]}
+            />
+
+            <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' },
+              ]}
+            />
+
+            <Stack gap={2}>
+              <Heading level={4}>Preferred Regions</Heading>
+              <Stack direction="row" gap={4}>
+                {['NA', 'EU', 'ASIA', 'OCE'].map(region => (
+                  <Checkbox
+                    key={region}
+                    label={region}
+                    checked={preferredRegions.includes(region)}
+                    onChange={(checked) => {
+                      if (checked) {
+                        setPreferredRegions([...preferredRegions, region]);
+                      } else {
+                        setPreferredRegions(preferredRegions.filter(r => r !== region));
+                      }
+                    }}
+                  />
+                ))}
+              </Stack>
+            </Stack>
+          </Stack>
+        </Card>
+      </ProfileSection>
+
+      <ProfileSection 
+        title="Privacy Settings" 
+        description="Control who can see your profile and activity."
+      >
+        <Card>
+          <Stack gap={2}>
+            <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>
+      </ProfileSection>
+
+      <Stack direction="row" gap={3} justify="end">
+        <Button variant="secondary">
+          Cancel
+        </Button>
+        <Button variant="primary" onClick={handleSave}>
+          Save Changes
+        </Button>
+      </Stack>
+    </Stack>
+  );
+}