mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-18 22:55:55 +01:00
parent b43a23a48c
commit aeaa43f4d3
179 changed files with 4736 additions and 6832 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
apps/website/components/profile/ProfileDetailsPanel.tsx
View File

@@ -1,12 +1,12 @@
'use client';
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Panel } from '@/ui/Panel';
import { Input } from '@/ui/Input';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import { TextArea } from '@/ui/TextArea';
import { ProfileStat } from '@/ui/ProfileHero';
import React from 'react';
interface ProfileDetailsPanelProps {
driver: {
@@ -21,60 +21,45 @@ interface ProfileDetailsPanelProps {
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>
<Panel title="Profile Details">
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
<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..."
/>
</div>
</Panel>
);
}
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>
<Panel title="Profile Details">
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
<div>
<Text size="xs" variant="low" weight="bold" uppercase block marginBottom={1}>Nationality</Text>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<Text size="xl">
{CountryFlagDisplay.fromCountryCode(driver.country).toString()}
</Text>
<Text variant="med">{driver.country}</Text>
</div>
</div>
<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>
<div>
<Text size="xs" variant="low" weight="bold" uppercase block marginBottom={1}>Bio</Text>
<Text variant="med" leading="relaxed">
{driver.bio || 'No bio provided.'}
</Text>
</div>
</div>
</Panel>
);
}