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-14 02:02:24 +01:00
parent 8d7c709e0c
commit 4522d41aef
291 changed files with 12763 additions and 9309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
apps/website/components/dashboard/FeedItemRow.tsx
View File

@@ -1,53 +0,0 @@
import { Activity, Trophy, Medal, UserPlus, Heart, Flag, Play } from 'lucide-react';
import Button from '@/components/ui/Button';
import Link from 'next/link';
import { timeAgo } from '@/lib/utilities/time';
interface FeedItemData {
id: string;
type: string;
headline: string;
body?: string;
timestamp: string;
formattedTime: string;
ctaHref?: string;
ctaLabel?: string;
}
function FeedItemRow({ item }: { item: FeedItemData }) {
const getActivityIcon = (type: string) => {
if (type.includes('win')) return { icon: Trophy, color: 'text-yellow-400 bg-yellow-400/10' };
if (type.includes('podium')) return { icon: Medal, color: 'text-warning-amber bg-warning-amber/10' };
if (type.includes('join')) return { icon: UserPlus, color: 'text-performance-green bg-performance-green/10' };
if (type.includes('friend')) return { icon: Heart, color: 'text-pink-400 bg-pink-400/10' };
if (type.includes('league')) return { icon: Flag, color: 'text-primary-blue bg-primary-blue/10' };
if (type.includes('race')) return { icon: Play, color: 'text-red-400 bg-red-400/10' };
return { icon: Activity, color: 'text-gray-400 bg-gray-400/10' };
};
const { icon: Icon, color } = getActivityIcon(item.type);
return (
<div className="flex gap-3 p-3 rounded-lg bg-deep-graphite/50 border border-charcoal-outline">
<div className={`flex h-10 w-10 items-center justify-center rounded-lg ${color} flex-shrink-0`}>
<Icon className="w-5 h-5" />
</div>
<div className="flex-1 min-w-0">
<p className="text-sm text-white">{item.headline}</p>
{item.body && (
<p className="text-xs text-gray-500 mt-1 line-clamp-2">{item.body}</p>
)}
<p className="text-xs text-gray-500 mt-1">{timeAgo(item.timestamp)}</p>
</div>
{item.ctaHref && (
<Link href={item.ctaHref} className="flex-shrink-0">
<Button variant="secondary" className="text-xs px-3 py-1.5">
{item.ctaLabel || 'View'}
</Button>
</Link>
)}
</div>
);
}
export { FeedItemRow };

33
apps/website/components/dashboard/FriendItem.tsx
View File

@@ -1,33 +0,0 @@
import Link from 'next/link';
import Image from 'next/image';
import { getCountryFlag } from '@/lib/utilities/country';
interface FriendItemProps {
id: string;
name: string;
avatarUrl: string;
country: string;
}
export function FriendItem({ id, name, avatarUrl, country }: FriendItemProps) {
return (
<Link
href={`/drivers/${id}`}
className="flex items-center gap-3 p-2 rounded-lg hover:bg-deep-graphite transition-colors"
>
<div className="w-9 h-9 rounded-full overflow-hidden bg-gradient-to-br from-primary-blue to-purple-600">
<Image
src={avatarUrl}
alt={name}
width={36}
height={36}
className="w-full h-full object-cover"
/>
</div>
<div className="flex-1 min-w-0">
<p className="text-white text-sm font-medium truncate">{name}</p>
<p className="text-xs text-gray-500">{getCountryFlag(country)}</p>
</div>
</Link>
);
}

54
apps/website/components/dashboard/LeagueStandingItem.tsx
View File

@@ -1,54 +0,0 @@
import Link from 'next/link';
import { Crown, ChevronRight } from 'lucide-react';
interface LeagueStandingItemProps {
leagueId: string;
leagueName: string;
position: number;
points: number;
totalDrivers: number;
className?: string;
}
export function LeagueStandingItem({
leagueId,
leagueName,
position,
points,
totalDrivers,
className,
}: LeagueStandingItemProps) {
return (
<Link
href={`/leagues/${leagueId}/standings`}
className={`flex items-center gap-4 p-4 rounded-xl bg-deep-graphite border border-charcoal-outline hover:border-primary-blue/30 transition-colors group ${className || ''}`}
>
<div className={`flex h-12 w-12 items-center justify-center rounded-xl font-bold text-xl ${
position === 1 ? 'bg-yellow-400/20 text-yellow-400' :
position === 2 ? 'bg-gray-300/20 text-gray-300' :
position === 3 ? 'bg-orange-400/20 text-orange-400' :
'bg-iron-gray text-gray-400'
}`}>
{position > 0 ? `P${position}` : '-'}
</div>
<div className="flex-1 min-w-0">
<p className="text-white font-semibold truncate group-hover:text-primary-blue transition-colors">
{leagueName}
</p>
<p className="text-sm text-gray-500">
{points} points • {totalDrivers} drivers
</p>
</div>
<div className="flex items-center gap-2">
{position <= 3 && position > 0 && (
<Crown className={`w-5 h-5 ${
position === 1 ? 'text-yellow-400' :
position === 2 ? 'text-gray-300' :
'text-orange-400'
}`} />
)}
<ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-primary-blue transition-colors" />
</div>
</Link>
);
}

25
apps/website/components/dashboard/StatCard.tsx
View File

@@ -1,25 +0,0 @@
import { LucideIcon } from 'lucide-react';
interface StatCardProps {
icon: LucideIcon;
value: string | number;
label: string;
color: string;
className?: string;
}
export function StatCard({ icon: Icon, value, label, color, className }: StatCardProps) {
return (
<div className={`p-4 rounded-xl bg-iron-gray/50 border border-charcoal-outline backdrop-blur-sm ${className || ''}`}>
<div className="flex items-center gap-3">
<div className={`flex h-10 w-10 items-center justify-center rounded-lg ${color}`}>
<Icon className="w-5 h-5" />
</div>
<div>
<p className="text-2xl font-bold text-white">{value}</p>
<p className="text-xs text-gray-500">{label}</p>
</div>
</div>
</div>
);
}

39
apps/website/components/dashboard/UpcomingRaceItem.tsx
View File

@@ -1,39 +0,0 @@
import Link from 'next/link';
import { timeUntil } from '@/lib/utilities/time';
interface UpcomingRaceItemProps {
id: string;
track: string;
car: string;
scheduledAt: Date;
isMyLeague: boolean;
}
export function UpcomingRaceItem({
id,
track,
car,
scheduledAt,
isMyLeague,
}: UpcomingRaceItemProps) {
return (
<Link
href={`/races/${id}`}
className="block p-3 rounded-lg bg-deep-graphite border border-charcoal-outline hover:border-primary-blue/30 transition-colors"
>
<div className="flex items-start justify-between gap-2 mb-2">
<p className="text-white font-medium text-sm truncate">{track}</p>
{isMyLeague && (
<span className="flex-shrink-0 w-2 h-2 rounded-full bg-performance-green" title="Your league" />
)}
</div>
<p className="text-xs text-gray-500 truncate mb-2">{car}</p>
<div className="flex items-center justify-between text-xs">
<span className="text-gray-400">
{scheduledAt.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
</span>
<span className="text-primary-blue font-medium">{timeUntil(scheduledAt)}</span>
</div>
</Link>
);
}