87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
'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 '🏁';
|
|
} |