website refactor

apps/website/templates/ProfileSettingsTemplate.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import React from 'react';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Button } from '@/ui/Button';
+import { Box } from '@/ui/Box';
+import { ProfileDetailsPanel } from '@/components/profile/ProfileDetailsPanel';
+import { ConnectedAccountsPanel } from '@/components/profile/ConnectedAccountsPanel';
+import { PreferencesPanel } from '@/components/profile/PreferencesPanel';
+import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
+
+interface ProfileSettingsTemplateProps {
+  viewData: ProfileViewData;
+  bio: string;
+  country: string;
+  onBioChange: (bio: string) => void;
+  onCountryChange: (country: string) => void;
+  onSave: () => void;
+}
+
+export function ProfileSettingsTemplate({ 
+  viewData, 
+  bio, 
+  country, 
+  onBioChange, 
+  onCountryChange, 
+  onSave 
+}: ProfileSettingsTemplateProps) {
+  return (
+    <Stack gap={8}>
+      <Box as="header">
+        <Stack direction="row" justify="between" align="center">
+          <Heading level={1}>Settings</Heading>
+          <Button variant="primary" onClick={onSave}>Save Changes</Button>
+        </Stack>
+      </Box>
+
+      <ProfileDetailsPanel 
+        driver={{
+          name: viewData.driver.name,
+          country: country,
+          bio: bio
+        }}
+        isEditing
+        onUpdate={(updates) => {
+          if (updates.bio !== undefined) onBioChange(updates.bio);
+          if (updates.country !== undefined) onCountryChange(updates.country);
+        }}
+      />
+
+      <ConnectedAccountsPanel 
+        iracingId={viewData.driver.iracingId || undefined}
+      />
+
+      <PreferencesPanel 
+        preferences={{
+          favoriteCarClass: 'GT3',
+          favoriteSeries: 'Endurance',
+          competitiveLevel: 'competitive',
+          showProfile: true,
+          showHistory: true
+        }}
+        isEditing
+      />
+    </Stack>
+  );
+}