65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { CountryFlagFormatter } from '@/lib/formatters/CountryFlagFormatter';
|
|
import { Group } from '@/ui/Group';
|
|
import { Input } from '@/ui/Input';
|
|
import { Panel } from '@/ui/Panel';
|
|
import { Stack } from '@/ui/Stack';
|
|
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 (
|
|
<Panel title="Profile Details">
|
|
<Stack gap={6}>
|
|
<Input
|
|
label="Nationality (ISO Code)"
|
|
value={driver.country}
|
|
onChange={(e) => onUpdate?.({ country: e.target.value })}
|
|
placeholder="e.g. US, GB, DE"
|
|
/>
|
|
<TextArea
|
|
label="Bio"
|
|
value={driver.bio || ''}
|
|
onChange={(e) => onUpdate?.({ bio: e.target.value })}
|
|
placeholder="Tell the community about your racing career..."
|
|
/>
|
|
</Stack>
|
|
</Panel>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Panel title="Profile Details">
|
|
<Stack gap={6}>
|
|
<Stack gap={1}>
|
|
<Text size="xs" variant="low" weight="bold" uppercase block>Nationality</Text>
|
|
<Group gap={2}>
|
|
<Text size="xl">
|
|
{CountryFlagFormatter.fromCountryCode(driver.country).toString()}
|
|
</Text>
|
|
<Text variant="med">{driver.country}</Text>
|
|
</Group>
|
|
</Stack>
|
|
|
|
<Stack gap={1}>
|
|
<Text size="xs" variant="low" weight="bold" uppercase block>Bio</Text>
|
|
<Text variant="med" leading="relaxed">
|
|
{driver.bio || 'No bio provided.'}
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Panel>
|
|
);
|
|
}
|