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-15 18:52:03 +01:00
parent f035cfe7ce
commit 5ef149b782
39 changed files with 564 additions and 518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
apps/website/templates/SponsorLeaguesTemplate.tsx
View File

@@ -1,6 +1,6 @@
'use client';
import React, { useState, useMemo } from 'react';
import React from 'react';
import { Card } from '@/ui/Card';
import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
@@ -17,13 +17,13 @@ import {
Trophy,
Users,
Search,
ChevronRight,
Car,
Megaphone,
} from 'lucide-react';
import { siteConfig } from '@/lib/siteConfig';
import { routes } from '@/lib/routing/RouteConfig';
import { AvailableLeagueCard } from '@/components/sponsors/AvailableLeagueCard';
import { Input } from '@/ui/Input';
interface AvailableLeague {
id: string;
@@ -43,58 +43,34 @@ interface AvailableLeague {
cpm: number;
}
type SortOption = 'rating' | 'drivers' | 'price' | 'views';
type TierFilter = 'all' | 'premium' | 'standard' | 'starter';
type AvailabilityFilter = 'all' | 'main' | 'secondary';
export type SortOption = 'rating' | 'drivers' | 'price' | 'views';
export type TierFilter = 'all' | 'premium' | 'standard' | 'starter';
export type AvailabilityFilter = 'all' | 'main' | 'secondary';
interface SponsorLeaguesTemplateProps {
viewData: {
leagues: AvailableLeague[];
stats: {
total: number;
mainAvailable: number;
secondaryAvailable: number;
totalDrivers: number;
avgCpm: number;
};
interface SponsorLeaguesViewData {
leagues: AvailableLeague[];
stats: {
total: number;
mainAvailable: number;
secondaryAvailable: number;
totalDrivers: number;
avgCpm: number;
};
}
export function SponsorLeaguesTemplate({ viewData }: SponsorLeaguesTemplateProps) {
const [searchQuery, setSearchQuery] = useState('');
const [tierFilter, setTierFilter] = useState<TierFilter>('all');
const [availabilityFilter, setAvailabilityFilter] = useState<AvailabilityFilter>('all');
const [sortBy, setSortBy] = useState<SortOption>('rating');
// Filter and sort leagues
const filteredLeagues = useMemo(() => {
return viewData.leagues
.filter((league) => {
if (searchQuery && !league.name.toLowerCase().includes(searchQuery.toLowerCase())) {
return false;
}
if (tierFilter !== 'all' && league.tier !== tierFilter) {
return false;
}
if (availabilityFilter === 'main' && !league.mainSponsorSlot.available) {
return false;
}
if (availabilityFilter === 'secondary' && league.secondarySlots.available === 0) {
return false;
}
return true;
})
.sort((a, b) => {
switch (sortBy) {
case 'rating': return b.rating - a.rating;
case 'drivers': return b.drivers - a.drivers;
case 'price': return a.mainSponsorSlot.price - b.mainSponsorSlot.price;
case 'views': return b.avgViewsPerRace - a.avgViewsPerRace;
default: return 0;
}
});
}, [viewData.leagues, searchQuery, tierFilter, availabilityFilter, sortBy]);
interface SponsorLeaguesTemplateProps {
viewData: SponsorLeaguesViewData;
filteredLeagues: AvailableLeague[];
searchQuery: string;
setSearchQuery: (query: string) => void;
}
export function SponsorLeaguesTemplate({
viewData,
filteredLeagues,
searchQuery,
setSearchQuery,
}: SponsorLeaguesTemplateProps) {
const stats = viewData.stats;
return (
@@ -138,12 +114,11 @@ export function SponsorLeaguesTemplate({ viewData }: SponsorLeaguesTemplateProps
</Text>
<Grid cols={4} gap={4}>
<Box>
<input
type="text"
<Input
placeholder="Search leagues..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full px-4 py-2 rounded-lg border border-charcoal-outline bg-iron-gray text-white placeholder-gray-500 focus:border-primary-blue focus:outline-none"
icon={<Icon icon={Search} size={4} />}
/>
</Box>
{/* Selects would go here, using standard Select UI if available */}
@@ -175,7 +150,7 @@ export function SponsorLeaguesTemplate({ viewData }: SponsorLeaguesTemplateProps
<Grid cols={3} gap={6}>
{filteredLeagues.map((league) => (
<GridItem key={league.id} colSpan={12} mdSpan={6} lgSpan={4}>
<AvailableLeagueCard league={league as any} />
<AvailableLeagueCard league={league} />
</GridItem>
))}
</Grid>
@@ -185,14 +160,12 @@ export function SponsorLeaguesTemplate({ viewData }: SponsorLeaguesTemplateProps
<Surface variant="muted" rounded="full" padding={4}>
<Icon icon={Trophy} size={12} color="#525252" />
</Surface>
<Box style={{ textAlign: 'center' }}>
<Box textAlign="center">
<Heading level={3}>No leagues found</Heading>
<Text color="text-gray-400" block mt={2}>Try adjusting your filters to see more results</Text>
</Box>
<Button variant="secondary" onClick={() => {
setSearchQuery('');
setTierFilter('all');
setAvailabilityFilter('all');
}}>
Clear Filters
</Button>
@@ -201,7 +174,7 @@ export function SponsorLeaguesTemplate({ viewData }: SponsorLeaguesTemplateProps
)}
{/* Platform Fee Notice */}
<Surface variant="muted" rounded="lg" border padding={4} style={{ backgroundColor: 'rgba(38, 38, 38, 0.3)' }}>
<Surface variant="muted" rounded="lg" border padding={4} bg="bg-neutral-800/30">
<Stack direction="row" align="start" gap={3}>
<Icon icon={Megaphone} size={5} color="#3b82f6" />
<Box>
@@ -220,8 +193,8 @@ export function SponsorLeaguesTemplate({ viewData }: SponsorLeaguesTemplateProps
function StatCard({ label, value, color = 'text-white' }: { label: string, value: string | number, color?: string }) {
return (
<Card>
<Box style={{ textAlign: 'center' }}>
<Text size="2xl" weight="bold" color={color as any} block mb={1}>{value}</Text>
<Box textAlign="center">
<Text size="2xl" weight="bold" color={color} block mb={1}>{value}</Text>
<Text size="sm" color="text-gray-400">{label}</Text>
</Box>
</Card>