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

wip

Browse Source
This commit is contained in:
Marc Mintel
2026-01-15 01:26:30 +01:00
parent 4a2d7d15a5
commit c3b308e960
102 changed files with 2532 additions and 4744 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
apps/website/components/drivers/CircularProgress.tsx
View File

@@ -1,52 +0,0 @@
'use client';
interface CircularProgressProps {
value: number;
max: number;
label: string;
color: string;
size?: number;
}
export function CircularProgress({ value, max, label, color, size = 80 }: CircularProgressProps) {
const percentage = Math.min((value / max) * 100, 100);
const strokeWidth = 6;
const radius = (size - strokeWidth) / 2;
const circumference = radius * 2 * Math.PI;
const strokeDashoffset = circumference - (percentage / 100) * circumference;
return (
<div className="flex flex-col items-center">
<div className="relative" style={{ width: size, height: size }}>
<svg className="transform -rotate-90" width={size} height={size}>
<circle
cx={size / 2}
cy={size / 2}
r={radius}
stroke="currentColor"
strokeWidth={strokeWidth}
fill="transparent"
className="text-charcoal-outline"
/>
<circle
cx={size / 2}
cy={size / 2}
r={radius}
stroke="currentColor"
strokeWidth={strokeWidth}
fill="transparent"
strokeDasharray={circumference}
strokeDashoffset={strokeDashoffset}
strokeLinecap="round"
className={color}
style={{ transition: 'stroke-dashoffset 0.5s ease-in-out' }}
/>
</svg>
<div className="absolute inset-0 flex items-center justify-center">
<span className="text-lg font-bold text-white">{percentage.toFixed(0)}%</span>
</div>
</div>
<span className="text-xs text-gray-400 mt-2">{label}</span>
</div>
);
}

88
apps/website/components/drivers/DriverProfilePageClient.tsx
View File

@@ -1,88 +0,0 @@
'use client';
import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import { DriverProfileTemplate } from '@/templates/DriverProfileTemplate';
import type { DriverProfileViewModel } from '@/lib/view-models/DriverProfileViewModel';
interface DriverProfilePageClientProps {
pageDto: DriverProfileViewModel | null;
error?: string;
empty?: {
title: string;
description: string;
};
}
/**
* DriverProfilePageClient
*
* Client component that:
* 1. Handles UI state (tabs, friend requests)
* 2. Passes ViewModel directly to Template
*
* No business logic or data transformation here.
* All data transformation happens in the PageQuery and ViewModelBuilder.
*/
export function DriverProfilePageClient({ pageDto, error, empty }: DriverProfilePageClientProps) {
const router = useRouter();
// UI State (UI-only concerns)
const [activeTab, setActiveTab] = useState<'overview' | 'stats'>('overview');
const [friendRequestSent, setFriendRequestSent] = useState(false);
// Event handlers (UI-only concerns)
const handleAddFriend = () => {
setFriendRequestSent(true);
};
const handleBackClick = () => {
router.push('/drivers');
};
// Handle error/empty states
if (error) {
return (
<div className="max-w-6xl mx-auto px-4 py-12 text-center">
<div className="text-red-400 mb-4">Error loading driver profile</div>
<p className="text-gray-400">Please try again later</p>
</div>
);
}
if (!pageDto || !pageDto.currentDriver) {
if (empty) {
return (
<div className="max-w-4xl mx-auto px-4">
<div className="text-center py-12">
<h2 className="text-xl font-semibold text-white mb-2">{empty.title}</h2>
<p className="text-gray-400">{empty.description}</p>
</div>
</div>
);
}
return null;
}
// Pass ViewModel directly to template
return (
<DriverProfileTemplate
driverProfile={pageDto}
allTeamMemberships={pageDto.teamMemberships.map(m => ({
team: {
id: m.teamId,
name: m.teamName,
},
role: m.role,
joinedAt: new Date(m.joinedAt),
}))}
isLoading={false}
error={null}
onBackClick={handleBackClick}
onAddFriend={handleAddFriend}
friendRequestSent={friendRequestSent}
activeTab={activeTab}
setActiveTab={setActiveTab}
/>
);
}

87
apps/website/components/drivers/DriversHero.tsx
View File

@@ -1,87 +0,0 @@
'use client';
import React from 'react';
import { Users, Trophy, LucideIcon } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Button } from '@/ui/Button';
import { Surface } from '@/ui/Surface';
import { Icon } from '@/ui/Icon';
import { DecorativeBlur } from '@/ui/DecorativeBlur';
interface StatItemProps {
label: string;
value: string | number;
color: string;
animate?: boolean;
}
function StatItem({ label, value, color, animate }: StatItemProps) {
return (
<Stack direction="row" align="center" gap={2}>
<Box style={{ width: '0.5rem', height: '0.5rem', borderRadius: '9999px', backgroundColor: color }} className={animate ? 'animate-pulse' : ''} />
<Text size="sm" color="text-gray-400">
<Text weight="semibold" color="text-white">{value}</Text> {label}
</Text>
</Stack>
);
}
interface DriversHeroProps {
driverCount: number;
activeCount: number;
totalWins: number;
totalRaces: number;
onViewLeaderboard: () => void;
}
export function DriversHero({
driverCount,
activeCount,
totalWins,
totalRaces,
onViewLeaderboard,
}: DriversHeroProps) {
return (
<Surface variant="muted" rounded="2xl" border padding={8} style={{ position: 'relative', overflow: 'hidden', background: 'linear-gradient(to bottom right, rgba(59, 130, 246, 0.2), rgba(38, 38, 38, 0.8), #0f1115)', borderColor: 'rgba(59, 130, 246, 0.3)' }}>
<DecorativeBlur color="blue" size="lg" position="top-right" opacity={10} />
<DecorativeBlur color="yellow" size="md" position="bottom-left" opacity={5} />
<Stack direction="row" align="center" justify="between" wrap gap={8} style={{ position: 'relative', zIndex: 10 }}>
<Box style={{ maxWidth: '42rem' }}>
<Stack direction="row" align="center" gap={3} mb={4}>
<Surface variant="muted" rounded="xl" padding={3} style={{ background: 'linear-gradient(to bottom right, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05))', border: '1px solid rgba(59, 130, 246, 0.2)' }}>
<Icon icon={Users} size={6} color="#3b82f6" />
</Surface>
<Heading level={1}>Drivers</Heading>
</Stack>
<Text size="lg" color="text-gray-400" block mb={6} style={{ lineHeight: 1.625 }}>
Meet the racers who make every lap count. From rookies to champions, track their journey and see who's dominating the grid.
</Text>
{/* Quick Stats */}
<Stack direction="row" gap={6} wrap>
<StatItem label="drivers" value={driverCount} color="#3b82f6" />
<StatItem label="active" value={activeCount} color="#10b981" animate />
<StatItem label="total wins" value={totalWins.toLocaleString()} color="#f59e0b" />
<StatItem label="races" value={totalRaces.toLocaleString()} color="#00f2ff" />
</Stack>
</Box>
{/* CTA */}
<Stack align="center" gap={4}>
<Button
variant="primary"
onClick={onViewLeaderboard}
icon={<Icon icon={Trophy} size={5} />}
>
View Leaderboard
</Button>
<Text size="xs" color="text-gray-500">See full driver rankings</Text>
</Stack>
</Stack>
</Surface>
);
}

50
apps/website/components/drivers/DriversPageClient.tsx
View File

@@ -1,50 +0,0 @@
'use client';
import React from 'react';
import { DriversTemplate } from '@/templates/DriversTemplate';
import type { DriverLeaderboardViewModel } from '@/lib/view-models/DriverLeaderboardViewModel';
interface DriversPageClientProps {
pageDto: DriverLeaderboardViewModel | null;
error?: string;
empty?: {
title: string;
description: string;
};
}
/**
* DriversPageClient
*
* Client component that:
* 1. Passes ViewModel directly to Template
*
* No business logic, filtering, or sorting here.
* All data transformation happens in the PageQuery and ViewModelBuilder.
*/
export function DriversPageClient({ pageDto, error, empty }: DriversPageClientProps) {
// Handle error/empty states
if (error) {
return (
<div className="max-w-7xl mx-auto px-4 py-12 text-center">
<div className="text-red-400 mb-4">Error loading drivers</div>
<p className="text-gray-400">Please try again later</p>
</div>
);
}
if (!pageDto || pageDto.drivers.length === 0) {
if (empty) {
return (
<div className="max-w-7xl mx-auto px-4 py-12 text-center">
<h2 className="text-xl font-semibold text-white mb-2">{empty.title}</h2>
<p className="text-gray-400">{empty.description}</p>
</div>
);
}
return null;
}
// Pass ViewModel directly to template
return <DriversTemplate data={pageDto} />;
}

84
apps/website/components/drivers/HeroSection.tsx
View File

@@ -1,84 +0,0 @@
import Heading from '@/ui/Heading';
import { Trophy, Users } from 'lucide-react';
import Button from '../ui/Button';
interface HeroSectionProps {
icon?: React.ElementType;
title: string;
description: string;
stats: Array<{
value: number | string;
label: string;
color: string;
animate?: boolean;
}>;
ctaLabel?: string;
ctaDescription?: string;
onCtaClick?: () => void;
className?: string;
}
export function HeroSection({
icon: Icon = Users,
title,
description,
stats,
ctaLabel = "View Leaderboard",
ctaDescription = "See full driver rankings",
onCtaClick,
className,
}: HeroSectionProps) {
return (
<div className={`relative mb-10 py-10 px-8 rounded-2xl bg-gradient-to-br from-primary-blue/20 via-iron-gray/80 to-deep-graphite border border-primary-blue/30 overflow-hidden ${className || ''}`}>
{/* Background decoration */}
<div className="absolute top-0 right-0 w-96 h-96 bg-primary-blue/10 rounded-full blur-3xl" />
<div className="absolute bottom-0 left-0 w-64 h-64 bg-yellow-400/5 rounded-full blur-3xl" />
<div className="absolute top-1/2 right-1/4 w-48 h-48 bg-performance-green/5 rounded-full blur-2xl" />
<div className="relative z-10 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
<div className="max-w-2xl">
<div className="flex items-center gap-3 mb-4">
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
<Icon className="w-6 h-6 text-primary-blue" />
</div>
<Heading level={1} className="text-3xl lg:text-4xl">
{title}
</Heading>
</div>
<p className="text-gray-400 text-lg leading-relaxed mb-6">
{description}
</p>
{/* Quick Stats */}
<div className="flex flex-wrap gap-6">
{stats.map((stat, index) => (
<div key={index} className="flex items-center gap-2">
<div className={`w-2 h-2 rounded-full ${stat.color} ${stat.animate ? 'animate-pulse' : ''}`} />
<span className="text-sm text-gray-400">
<span className="text-white font-semibold">
{typeof stat.value === 'number' ? stat.value.toLocaleString() : stat.value}
</span> {stat.label}
</span>
</div>
))}
</div>
</div>
{/* CTA */}
{onCtaClick && (
<div className="flex flex-col gap-4">
<Button
variant="primary"
onClick={onCtaClick}
className="flex items-center gap-2 px-6 py-3"
>
<Trophy className="w-5 h-5" />
{ctaLabel}
</Button>
<p className="text-xs text-gray-500 text-center">{ctaDescription}</p>
</div>
)}
</div>
</div>
);
}

27
apps/website/components/drivers/HorizontalBarChart.tsx
View File

@@ -1,27 +0,0 @@
'use client';
interface HorizontalBarChartProps {
data: { label: string; value: number; color: string }[];
maxValue: number;
}
export function HorizontalBarChart({ data, maxValue }: HorizontalBarChartProps) {
return (
<div className="space-y-3">
{data.map((item) => (
<div key={item.label}>
<div className="flex justify-between text-sm mb-1">
<span className="text-gray-400">{item.label}</span>
<span className="text-white font-medium">{item.value}</span>
</div>
<div className="h-2 bg-charcoal-outline rounded-full overflow-hidden">
<div
className={`h-full rounded-full ${item.color} transition-all duration-500 ease-out`}
style={{ width: `${Math.min((item.value / maxValue) * 100, 100)}%` }}
/>
</div>
</div>
))}
</div>
);
}

2
apps/website/components/drivers/RatingBreakdown.tsx
View File

@@ -1,6 +1,6 @@
'use client';
import Card from '../ui/Card';
import { Card } from '@/ui/Card';
interface RatingBreakdownProps {
skillRating?: number;