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

41
apps/website/components/leagues/AvailableLeagueCard.tsx
View File

@@ -2,13 +2,12 @@
import { CheckCircle2, Clock, Star } from 'lucide-react';
import { Badge } from '@/ui/Badge';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Link } from '@/ui/Link';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
interface AvailableLeague {
@@ -53,33 +52,33 @@ export function AvailableLeagueCard({ league }: AvailableLeagueCardProps) {
<Stack gap={4}>
{/* Header */}
<Stack direction="row" align="start" justify="between">
<Box flexGrow={1}>
<Stack flexGrow={1}>
<Stack direction="row" align="center" gap={2} mb={1} wrap>
<Badge variant="primary">{config.icon} {config.label}</Badge>
<Box px={2} py={0.5} rounded="full" className={status.bgColor}>
<Stack px={2} py={0.5} rounded="full" className={status.bgColor}>
<Text size="xs" weight="medium" className={status.color}>{status.label}</Text>
</Box>
</Stack>
</Stack>
<Heading level={3}>{league.name}</Heading>
<Text size="sm" color="text-gray-500" block mt={1}>{league.game}</Text>
</Box>
<Box px={2} py={1} rounded="lg" bg="bg-iron-gray/50">
</Stack>
<Stack px={2} py={1} rounded="lg" bg="bg-iron-gray/50">
<Stack direction="row" align="center" gap={1}>
<Icon icon={Star} size={3.5} color="text-yellow-400" />
<Text size="sm" weight="medium" color="text-white">{league.rating}</Text>
</Stack>
</Box>
</Stack>
</Stack>
{/* Description */}
<Text size="sm" color="text-gray-400" block truncate>{league.description}</Text>
{/* Stats Grid */}
<Box display="grid" gridCols={3} gap={2}>
<Stack display="grid" gridCols={3} gap={2}>
<StatItem label="Drivers" value={league.drivers} />
<StatItem label="Avg Views" value={league.formattedAvgViews} />
<StatItem label="CPM" value={league.formattedCpm} color="text-performance-green" />
</Box>
</Stack>
{/* Next Race */}
{league.nextRace && (
@@ -106,21 +105,21 @@ export function AvailableLeagueCard({ league }: AvailableLeagueCardProps) {
{/* Actions */}
<Stack direction="row" gap={2}>
<Box flexGrow={1}>
<Stack flexGrow={1}>
<Link href={`/sponsor/leagues/${league.id}`} block>
<Button variant="secondary" fullWidth size="sm">
View Details
</Button>
</Link>
</Box>
</Stack>
{(league.mainSponsorSlot.available || league.secondarySlots.available > 0) && (
<Box flexGrow={1}>
<Stack flexGrow={1}>
<Link href={`/sponsor/leagues/${league.id}?action=sponsor`} block>
<Button variant="primary" fullWidth size="sm">
Sponsor
</Button>
</Link>
</Box>
</Stack>
)}
</Stack>
</Stack>
@@ -130,22 +129,22 @@ export function AvailableLeagueCard({ league }: AvailableLeagueCardProps) {
function StatItem({ label, value, color = 'text-white' }: { label: string, value: string | number, color?: string }) {
return (
<Box p={2} bg="bg-iron-gray/50" rounded="lg" textAlign="center">
<Stack p={2} bg="bg-iron-gray/50" rounded="lg" textAlign="center">
<Text weight="bold" className={color}>{value}</Text>
<Text size="xs" color="text-gray-500" block mt={1}>{label}</Text>
</Box>
</Stack>
);
}
function SlotRow({ label, available, price }: { label: string, available: boolean, price: string }) {
return (
<Box p={2} rounded="lg" bg="bg-iron-gray/30">
<Stack p={2} rounded="lg" bg="bg-iron-gray/30">
<Stack direction="row" align="center" justify="between">
<Stack direction="row" align="center" gap={2}>
<Box width="2.5" height="2.5" rounded="full" bg={available ? 'bg-performance-green' : 'bg-error-red'} />
<Stack width="2.5" height="2.5" rounded="full" bg={available ? 'bg-performance-green' : 'bg-error-red'} />
<Text size="sm" color="text-gray-300">{label}</Text>
</Stack>
<Box>
<Stack>
{available ? (
<Text size="sm" weight="semibold" color="text-white">{price}</Text>
) : (
@@ -154,8 +153,8 @@ function SlotRow({ label, available, price }: { label: string, available: boolea
<Text size="sm" color="text-gray-500">Filled</Text>
</Stack>
)}
</Box>
</Stack>
</Stack>
</Box>
</Stack>
);
}