alpha wip

2025-12-03 00:46:08 +01:00
parent 3b55fd1a63
commit 97e29d3d80
51 changed files with 6321 additions and 237 deletions
--- a/apps/website/components/alpha/DriverProfile.tsx
+++ b/apps/website/components/alpha/DriverProfile.tsx
@@ -0,0 +1,87 @@
+'use client';
+
+import { DriverDTO } from '@/application/mappers/EntityMappers';
+import Card from '../ui/Card';
+import Button from '../ui/Button';
+
+interface DriverProfileProps {
+  driver: DriverDTO;
+}
+
+export default function DriverProfile({ driver }: DriverProfileProps) {
+  const formattedDate = new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  }).format(new Date(driver.joinedAt));
+
+  return (
+    <Card className="max-w-2xl mx-auto">
+      <div className="space-y-6">
+        <div className="flex items-start justify-between">
+          <div>
+            <h2 className="text-2xl font-bold text-white mb-2">{driver.name}</h2>
+            <p className="text-gray-400 text-sm">iRacing ID: {driver.iracingId}</p>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-3xl" aria-label={`Country: ${driver.country}`}>
+              {getCountryFlag(driver.country)}
+            </span>
+          </div>
+        </div>
+
+        {driver.bio && (
+          <div className="border-t border-charcoal-outline pt-4">
+            <h3 className="text-sm font-semibold text-gray-400 mb-2">Bio</h3>
+            <p className="text-gray-300 leading-relaxed">{driver.bio}</p>
+          </div>
+        )}
+
+        <div className="border-t border-charcoal-outline pt-4">
+          <div className="flex items-center gap-2 text-sm text-gray-400">
+            <svg 
+              className="w-4 h-4" 
+              fill="none" 
+              stroke="currentColor" 
+              viewBox="0 0 24 24"
+            >
+              <path 
+                strokeLinecap="round" 
+                strokeLinejoin="round" 
+                strokeWidth={2} 
+                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" 
+              />
+            </svg>
+            <span>Member since {formattedDate}</span>
+          </div>
+        </div>
+
+        <div className="pt-4">
+          <Button
+            variant="secondary"
+            className="w-full"
+            disabled
+          >
+            Edit Profile
+          </Button>
+          <p className="text-xs text-gray-500 text-center mt-2">
+            Profile editing coming soon
+          </p>
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+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 '🏁';
+}