81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
|
|
import { Card } from '@/ui/Card';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Input } from '@/ui/Input';
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { TextArea } from '@/ui/TextArea';
|
|
|
|
interface ProfileDetailsPanelProps {
|
|
driver: {
|
|
name: string;
|
|
country: string;
|
|
bio?: string | null;
|
|
};
|
|
isEditing?: boolean;
|
|
onUpdate?: (updates: { bio?: string; country?: string }) => void;
|
|
}
|
|
|
|
export function ProfileDetailsPanel({ driver, isEditing, onUpdate }: ProfileDetailsPanelProps) {
|
|
if (isEditing) {
|
|
return (
|
|
<section aria-labelledby="profile-details-heading">
|
|
<Card>
|
|
<Stack gap={6}>
|
|
<Heading level={3} id="profile-details-heading" fontSize="1.125rem">Profile Details</Heading>
|
|
<Stack gap={4}>
|
|
<Input
|
|
label="Nationality (ISO Code)"
|
|
value={driver.country}
|
|
onChange={(e) => onUpdate?.({ country: e.target.value })}
|
|
placeholder="e.g. US, GB, DE"
|
|
maxLength={2}
|
|
/>
|
|
<TextArea
|
|
label="Bio"
|
|
value={driver.bio || ''}
|
|
onChange={(e) => onUpdate?.({ bio: e.target.value })}
|
|
placeholder="Tell the community about your racing career..."
|
|
rows={4}
|
|
/>
|
|
</Stack>
|
|
</Stack>
|
|
</Card>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section aria-labelledby="profile-details-heading">
|
|
<Card>
|
|
<Stack gap={6}>
|
|
<Stack direction="row" justify="between" align="center">
|
|
<Heading level={3} id="profile-details-heading" fontSize="1.125rem">Profile Details</Heading>
|
|
</Stack>
|
|
|
|
<Stack gap={4}>
|
|
<Stack gap={1}>
|
|
<Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em" uppercase>Nationality</Text>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Text size="xl">
|
|
{CountryFlagDisplay.fromCountryCode(driver.country).toString()}
|
|
</Text>
|
|
<Text color="#d1d5db">{driver.country}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Stack gap={1}>
|
|
<Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em" uppercase>Bio</Text>
|
|
<Text color="#d1d5db" lineHeight="relaxed">
|
|
{driver.bio || 'No bio provided.'}
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
</Card>
|
|
</section>
|
|
);
|
|
}
|