wip

2025-12-04 11:54:23 +01:00
parent c0fdae3d3c
commit 9d5caa87f3
83 changed files with 1579 additions and 2151 deletions
--- a/apps/website/components/profile/ProfileHeader.tsx
+++ b/apps/website/components/profile/ProfileHeader.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import { DriverDTO } from '@gridpilot/racing/application/mappers/EntityMappers';
+import Button from '../ui/Button';
+import { getDriverTeam } from '@gridpilot/racing/application';
+
+interface ProfileHeaderProps {
+  driver: DriverDTO;
+  isOwnProfile?: boolean;
+  onEditClick?: () => void;
+}
+
+export default function ProfileHeader({ driver, isOwnProfile = false, onEditClick }: ProfileHeaderProps) {
+  return (
+    <div className="flex items-start justify-between">
+      <div className="flex items-start gap-4">
+        <div className="w-20 h-20 rounded-full bg-gradient-to-br from-primary-blue to-purple-600 flex items-center justify-center text-3xl font-bold text-white">
+          {driver.name.charAt(0).toUpperCase()}
+        </div>
+        
+        <div>
+          <div className="flex items-center gap-3 mb-2">
+            <h1 className="text-3xl font-bold text-white">{driver.name}</h1>
+            <span className="text-3xl" aria-label={`Country: ${driver.country}`}>
+              {getCountryFlag(driver.country)}
+            </span>
+            {(() => {
+              const teamData = getDriverTeam(driver.id);
+              if (teamData) {
+                return (
+                  <span className="px-3 py-1 bg-primary-blue/20 text-primary-blue rounded-full text-sm font-medium">
+                    {teamData.team.tag}
+                  </span>
+                );
+              }
+              return null;
+            })()}
+          </div>
+          
+          <div className="flex items-center gap-4 text-sm text-gray-400">
+            <span>iRacing ID: {driver.iracingId}</span>
+            <span>•</span>
+            <span>Rating: 1450</span>
+            {(() => {
+              const teamData = getDriverTeam(driver.id);
+              if (teamData) {
+                return (
+                  <>
+                    <span>•</span>
+                    <span className="text-primary-blue">{teamData.team.name}</span>
+                  </>
+                );
+              }
+              return null;
+            })()}
+          </div>
+        </div>
+      </div>
+
+      {isOwnProfile && (
+        <Button variant="secondary" onClick={onEditClick}>
+          Edit Profile
+        </Button>
+      )}
+    </div>
+  );
+}
+
+function getCountryFlag(countryCode: string): string {
+  const code = countryCode.toUpperCase();
+  
+  if (code.length === 2) {
+    const codePoints = [...code].map(char => 
+      127397 + char.charCodeAt(0)
+    );
+    return String.fromCodePoint(...codePoints);
+  }
+  
+  return '🏁';
+}