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 16:18:18 +01:00
parent 0b301feb61
commit 13567d51af
329 changed files with 4701 additions and 4750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/website/components/profile/ConnectedAccountsPanel.tsx
View File

@@ -23,9 +23,9 @@ export function ConnectedAccountsPanel({ iracingId, onConnectIRacing }: Connecte
<Stack gap={4} className="divide-y divide-border-gray/30">
<Stack direction="row" justify="between" align="center" pt={0}>
<Stack direction="row" align="center" gap={3}>
<Box backgroundColor="#1e293b" p={2} rounded="md">
<Stack backgroundColor="#1e293b" p={2} rounded="md">
<Globe size={20} color="#4ED4E0" />
</Box>
</Stack>
<Stack gap={0.5}>
<Text weight="bold" size="sm">iRacing</Text>
<Text size="xs" color="#9ca3af">
@@ -40,17 +40,17 @@ export function ConnectedAccountsPanel({ iracingId, onConnectIRacing }: Connecte
</Button>
)}
{iracingId && (
<Box backgroundColor="rgba(16, 185, 129, 0.1)" px={2} py={1} rounded="full">
<Stack backgroundColor="rgba(16, 185, 129, 0.1)" px={2} py={1} rounded="full">
<Text size="xs" color="#10b981" weight="bold">Verified</Text>
</Box>
</Stack>
)}
</Stack>
<Stack direction="row" justify="between" align="center" pt={4}>
<Stack direction="row" align="center" gap={3}>
<Box backgroundColor="#1e293b" p={2} rounded="md">
<Stack backgroundColor="#1e293b" p={2} rounded="md">
<LinkIcon size={20} color="#198CFF" />
</Box>
</Stack>
<Stack gap={0.5}>
<Text weight="bold" size="sm">Discord</Text>
<Text size="xs" color="#9ca3af">Connect for notifications</Text>
@@ -68,4 +68,3 @@ export function ConnectedAccountsPanel({ iracingId, onConnectIRacing }: Connecte
);
}
import { Box } from '@/ui/Box';

35
apps/website/components/profile/ProfileHeader.tsx
View File

@@ -3,11 +3,10 @@
import React from 'react';
import { mediaConfig } from '@/lib/config/mediaConfig';
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
import { Image } from '@/ui/Image';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { Calendar, Globe, Star, Trophy, UserPlus } from 'lucide-react';
@@ -42,8 +41,8 @@ export function ProfileHeader({
<Surface variant="muted" rounded="xl" border padding={6} backgroundColor="#141619" borderColor="#23272B">
<Stack direction="row" align="center" gap={8} wrap>
{/* Avatar with telemetry-style border */}
<Box position="relative">
<Box
<Stack position="relative">
<Stack
width="6rem"
height="6rem"
rounded="md"
@@ -52,7 +51,7 @@ export function ProfileHeader({
p={0.5}
backgroundColor="#0C0D0F"
>
<Box width="100%" height="100%" rounded="sm" overflow="hidden">
<Stack width="100%" height="100%" rounded="sm" overflow="hidden">
<Image
src={driver.avatarUrl || mediaConfig.avatars.defaultFallback}
alt={driver.name}
@@ -62,12 +61,12 @@ export function ProfileHeader({
fullWidth
fullHeight
/>
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
{/* Driver Info */}
<Box flexGrow={1} minWidth="0">
<Stack flexGrow={1} minWidth="0">
<Stack direction="row" align="center" gap={3} mb={1}>
<Heading level={1} fontSize="1.5rem">
{driver.name}
@@ -82,7 +81,7 @@ export function ProfileHeader({
<Globe size={14} />
<Text size="xs" font="mono">ID: {driver.iracingId}</Text>
</Stack>
<Box width="1px" height="12px" backgroundColor="#23272B" />
<Stack width="1px" height="12px" backgroundColor="#23272B" />
<Stack direction="row" align="center" gap={1.5}>
<Calendar size={14} />
<Text size="xs">
@@ -90,13 +89,13 @@ export function ProfileHeader({
</Text>
</Stack>
</Stack>
</Box>
</Stack>
{/* Stats Grid */}
<Stack direction="row" align="center" gap={6}>
{stats && (
<>
<Box>
<Stack>
<Stack gap={0.5}>
<Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em">RATING</Text>
<Stack direction="row" align="center" gap={1.5}>
@@ -104,9 +103,9 @@ export function ProfileHeader({
<Text font="mono" size="lg" weight="bold" color="#198CFF">{stats.rating}</Text>
</Stack>
</Stack>
</Box>
<Box width="1px" height="32px" backgroundColor="#23272B" />
<Box>
</Stack>
<Stack width="1px" height="32px" backgroundColor="#23272B" />
<Stack>
<Stack gap={0.5}>
<Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em">GLOBAL RANK</Text>
<Stack direction="row" align="center" gap={1.5}>
@@ -114,14 +113,14 @@ export function ProfileHeader({
<Text font="mono" size="lg" weight="bold" color="#FFBE4D">#{globalRank}</Text>
</Stack>
</Stack>
</Box>
</Stack>
</>
)}
</Stack>
{/* Actions */}
{!isOwnProfile && onAddFriend && (
<Box ml="auto">
<Stack ml="auto">
<Button
variant={friendRequestSent ? 'secondary' : 'primary'}
onClick={onAddFriend}
@@ -131,7 +130,7 @@ export function ProfileHeader({
>
{friendRequestSent ? 'Request Sent' : 'Add Friend'}
</Button>
</Box>
</Stack>
)}
</Stack>
</Surface>

24
apps/website/components/profile/ProfileNavTabs.tsx
View File

@@ -1,7 +1,6 @@
'use client';
import React from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
@@ -24,11 +23,11 @@ const DEFAULT_TABS: { id: ProfileTab; label: string }[] = [
export function ProfileNavTabs({ activeTab, onTabChange, tabs = DEFAULT_TABS }: ProfileNavTabsProps) {
return (
<nav aria-label="Profile navigation">
<Box borderBottom borderColor="#23272B">
<Stack as="nav" {...({ 'aria-label': 'Profile navigation' } as any)}>
<Stack borderBottom borderColor="#23272B">
<Stack direction="row" gap={8}>
{tabs.map((tab) => (
<Box
<Stack
key={tab.id}
onClick={() => onTabChange(tab.id)}
pb={4}
@@ -38,27 +37,26 @@ export function ProfileNavTabs({ activeTab, onTabChange, tabs = DEFAULT_TABS }:
color={activeTab === tab.id ? '#198CFF' : '#9ca3af'}
transition
fontSize="0.875rem"
fontWeight={activeTab === tab.id ? '600' : '400'}
mb="-1px"
fontWeight={activeTab === tab.id ? 'semibold' : 'normal'}
position="relative"
className="group"
className="group mb-[-1px]"
>
<Text capitalize>{tab.label}</Text>
{activeTab === tab.id && (
<Box
<Stack
position="absolute"
bottom={0}
left={0}
right={0}
height="2px"
backgroundColor="#198CFF"
boxShadow="0 0 8px rgba(25, 140, 255, 0.5)"
/>
{...({ boxShadow: "0 0 8px rgba(25, 140, 255, 0.5)" } as any)}
>{null}</Stack>
)}
</Box>
</Stack>
))}
</Stack>
</Box>
</nav>
</Stack>
</Stack>
);
}

15
apps/website/components/profile/ProfileSection.tsx
View File

@@ -1,9 +1,8 @@
'use client';
import React from 'react';
import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/Stack';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
interface ProfileSectionProps {
@@ -15,19 +14,19 @@ interface ProfileSectionProps {
export function ProfileSection({ title, description, action, children }: ProfileSectionProps) {
return (
<Box mb={8}>
<Stack mb={8}>
<Stack direction="row" align="center" justify="between" mb={4}>
<Box>
<Stack>
<Heading level={2}>{title}</Heading>
{description && (
<Text color="text-gray-400" size="sm" mt={1} block>
{description}
</Text>
)}
</Box>
{action && <Box>{action}</Box>}
</Stack>
{action && <Stack>{action}</Stack>}
</Stack>
<Box>{children}</Box>
</Box>
<Stack>{children}</Stack>
</Stack>
);
}

8
apps/website/components/profile/SponsorshipRequestsPanel.tsx
View File

@@ -1,12 +1,10 @@
'use client';
import React from 'react';
import { Card } from '@/ui/Card';
import { Card , Card as Surface } from '@/ui/Card';
import { Button } from '@/ui/Button';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Surface } from '@/ui/Surface';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
import { ProfileSection } from './ProfileSection';
@@ -61,7 +59,7 @@ export function SponsorshipRequestsPanel({
borderColor="#23272B"
>
<Stack direction="row" align="center" justify="between" wrap gap={4}>
<Box flexGrow={1} minWidth="0">
<Stack flexGrow={1} minWidth="0">
<Text weight="medium" color="text-white" block>{request.sponsorName}</Text>
{request.message && (
<Text size="xs" color="text-gray-400" block mt={1}>{request.message}</Text>
@@ -69,7 +67,7 @@ export function SponsorshipRequestsPanel({
<Text size="xs" color="text-gray-500" block mt={2}>
{DateDisplay.formatShort(request.createdAtIso)}
</Text>
</Box>
</Stack>
<Stack direction="row" gap={2}>
<Button
variant="primary"