298 lines
11 KiB
TypeScript
298 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import Card from '@/components/ui/Card';
|
|
import Button from '@/components/ui/Button';
|
|
import {
|
|
Trophy,
|
|
Users,
|
|
Eye,
|
|
Search,
|
|
Filter,
|
|
Star,
|
|
ChevronRight
|
|
} from 'lucide-react';
|
|
|
|
interface AvailableLeague {
|
|
id: string;
|
|
name: string;
|
|
game: string;
|
|
drivers: number;
|
|
avgViewsPerRace: number;
|
|
mainSponsorSlot: { available: boolean; price: number };
|
|
secondarySlots: { available: number; total: number; price: number };
|
|
rating: number;
|
|
tier: 'premium' | 'standard' | 'starter';
|
|
}
|
|
|
|
const MOCK_AVAILABLE_LEAGUES: AvailableLeague[] = [
|
|
{
|
|
id: 'league-1',
|
|
name: 'GT3 Masters Championship',
|
|
game: 'iRacing',
|
|
drivers: 48,
|
|
avgViewsPerRace: 8200,
|
|
mainSponsorSlot: { available: true, price: 1200 },
|
|
secondarySlots: { available: 1, total: 2, price: 400 },
|
|
rating: 4.8,
|
|
tier: 'premium',
|
|
},
|
|
{
|
|
id: 'league-2',
|
|
name: 'Endurance Pro Series',
|
|
game: 'ACC',
|
|
drivers: 72,
|
|
avgViewsPerRace: 12500,
|
|
mainSponsorSlot: { available: false, price: 1500 },
|
|
secondarySlots: { available: 2, total: 2, price: 500 },
|
|
rating: 4.9,
|
|
tier: 'premium',
|
|
},
|
|
{
|
|
id: 'league-3',
|
|
name: 'Formula Sim League',
|
|
game: 'iRacing',
|
|
drivers: 24,
|
|
avgViewsPerRace: 5400,
|
|
mainSponsorSlot: { available: true, price: 800 },
|
|
secondarySlots: { available: 2, total: 2, price: 300 },
|
|
rating: 4.5,
|
|
tier: 'standard',
|
|
},
|
|
{
|
|
id: 'league-4',
|
|
name: 'Touring Car Masters',
|
|
game: 'rFactor 2',
|
|
drivers: 32,
|
|
avgViewsPerRace: 3200,
|
|
mainSponsorSlot: { available: true, price: 500 },
|
|
secondarySlots: { available: 2, total: 2, price: 200 },
|
|
rating: 4.2,
|
|
tier: 'starter',
|
|
},
|
|
{
|
|
id: 'league-5',
|
|
name: 'LMP Challenge',
|
|
game: 'Le Mans Ultimate',
|
|
drivers: 36,
|
|
avgViewsPerRace: 6800,
|
|
mainSponsorSlot: { available: true, price: 900 },
|
|
secondarySlots: { available: 1, total: 2, price: 350 },
|
|
rating: 4.6,
|
|
tier: 'standard',
|
|
},
|
|
];
|
|
|
|
function LeagueCard({ league }: { league: AvailableLeague }) {
|
|
const tierColors = {
|
|
premium: 'bg-gradient-to-r from-yellow-500/20 to-amber-500/20 border-yellow-500/30',
|
|
standard: 'bg-gradient-to-r from-blue-500/20 to-cyan-500/20 border-blue-500/30',
|
|
starter: 'bg-gradient-to-r from-gray-500/20 to-slate-500/20 border-gray-500/30',
|
|
};
|
|
|
|
const tierBadgeColors = {
|
|
premium: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
|
|
standard: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
|
|
starter: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
|
|
};
|
|
|
|
return (
|
|
<Card className={`overflow-hidden border ${tierColors[league.tier]}`}>
|
|
<div className="p-4">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<h3 className="font-semibold text-white">{league.name}</h3>
|
|
<span className={`px-2 py-0.5 rounded text-xs font-medium capitalize border ${tierBadgeColors[league.tier]}`}>
|
|
{league.tier}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-gray-400">{league.game}</p>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<Star className="w-4 h-4 text-yellow-400 fill-yellow-400" />
|
|
<span className="text-sm text-white">{league.rating}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-3 mb-4">
|
|
<div className="text-center p-2 bg-iron-gray/50 rounded">
|
|
<div className="text-lg font-bold text-white">{league.drivers}</div>
|
|
<div className="text-xs text-gray-500">Drivers</div>
|
|
</div>
|
|
<div className="text-center p-2 bg-iron-gray/50 rounded">
|
|
<div className="text-lg font-bold text-white">{(league.avgViewsPerRace / 1000).toFixed(1)}k</div>
|
|
<div className="text-xs text-gray-500">Avg Views</div>
|
|
</div>
|
|
<div className="text-center p-2 bg-iron-gray/50 rounded">
|
|
<div className="text-lg font-bold text-white">${(league.mainSponsorSlot.price / league.avgViewsPerRace * 1000).toFixed(0)}</div>
|
|
<div className="text-xs text-gray-500">CPM</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2 mb-4">
|
|
<div className="flex items-center justify-between p-2 bg-iron-gray/30 rounded">
|
|
<div className="flex items-center gap-2">
|
|
<div className={`w-2 h-2 rounded-full ${league.mainSponsorSlot.available ? 'bg-performance-green' : 'bg-racing-red'}`} />
|
|
<span className="text-sm text-gray-300">Main Sponsor</span>
|
|
</div>
|
|
<div className="text-sm">
|
|
{league.mainSponsorSlot.available ? (
|
|
<span className="text-white font-medium">${league.mainSponsorSlot.price}/season</span>
|
|
) : (
|
|
<span className="text-gray-500">Taken</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between p-2 bg-iron-gray/30 rounded">
|
|
<div className="flex items-center gap-2">
|
|
<div className={`w-2 h-2 rounded-full ${league.secondarySlots.available > 0 ? 'bg-performance-green' : 'bg-racing-red'}`} />
|
|
<span className="text-sm text-gray-300">Secondary Slots</span>
|
|
</div>
|
|
<div className="text-sm">
|
|
{league.secondarySlots.available > 0 ? (
|
|
<span className="text-white font-medium">{league.secondarySlots.available}/{league.secondarySlots.total} @ ${league.secondarySlots.price}</span>
|
|
) : (
|
|
<span className="text-gray-500">Full</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Button variant="secondary" className="flex-1">
|
|
View Details
|
|
</Button>
|
|
{(league.mainSponsorSlot.available || league.secondarySlots.available > 0) && (
|
|
<Button variant="primary" className="flex-1">
|
|
Sponsor
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default function SponsorLeaguesPage() {
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [tierFilter, setTierFilter] = useState<'all' | 'premium' | 'standard' | 'starter'>('all');
|
|
const [availabilityFilter, setAvailabilityFilter] = useState<'all' | 'main' | 'secondary'>('all');
|
|
|
|
const filteredLeagues = MOCK_AVAILABLE_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;
|
|
});
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto py-8 px-4">
|
|
{/* Breadcrumb */}
|
|
<div className="flex items-center gap-2 text-sm text-gray-400 mb-6">
|
|
<a href="/sponsor/dashboard" className="hover:text-white">Dashboard</a>
|
|
<ChevronRight className="w-4 h-4" />
|
|
<span className="text-white">Browse Leagues</span>
|
|
</div>
|
|
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<h1 className="text-2xl font-bold text-white mb-2">Find Leagues to Sponsor</h1>
|
|
<p className="text-gray-400">Discover racing leagues looking for sponsors and grow your brand</p>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="flex flex-col md:flex-row gap-4 mb-6">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search leagues..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="w-full pl-10 pr-4 py-2 rounded-lg border border-charcoal-outline bg-iron-gray text-white placeholder-gray-500 focus:border-primary-blue focus:outline-none"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<select
|
|
value={tierFilter}
|
|
onChange={(e) => setTierFilter(e.target.value as typeof tierFilter)}
|
|
className="px-3 py-2 rounded-lg border border-charcoal-outline bg-iron-gray text-white focus:border-primary-blue focus:outline-none"
|
|
>
|
|
<option value="all">All Tiers</option>
|
|
<option value="premium">Premium</option>
|
|
<option value="standard">Standard</option>
|
|
<option value="starter">Starter</option>
|
|
</select>
|
|
<select
|
|
value={availabilityFilter}
|
|
onChange={(e) => setAvailabilityFilter(e.target.value as typeof availabilityFilter)}
|
|
className="px-3 py-2 rounded-lg border border-charcoal-outline bg-iron-gray text-white focus:border-primary-blue focus:outline-none"
|
|
>
|
|
<option value="all">All Slots</option>
|
|
<option value="main">Main Available</option>
|
|
<option value="secondary">Secondary Available</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Banner */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
|
|
<Card className="p-4 text-center">
|
|
<div className="text-2xl font-bold text-white">{MOCK_AVAILABLE_LEAGUES.length}</div>
|
|
<div className="text-sm text-gray-400">Available Leagues</div>
|
|
</Card>
|
|
<Card className="p-4 text-center">
|
|
<div className="text-2xl font-bold text-performance-green">
|
|
{MOCK_AVAILABLE_LEAGUES.filter(l => l.mainSponsorSlot.available).length}
|
|
</div>
|
|
<div className="text-sm text-gray-400">Main Slots Open</div>
|
|
</Card>
|
|
<Card className="p-4 text-center">
|
|
<div className="text-2xl font-bold text-primary-blue">
|
|
{MOCK_AVAILABLE_LEAGUES.reduce((sum, l) => sum + l.secondarySlots.available, 0)}
|
|
</div>
|
|
<div className="text-sm text-gray-400">Secondary Slots Open</div>
|
|
</Card>
|
|
<Card className="p-4 text-center">
|
|
<div className="text-2xl font-bold text-white">
|
|
{MOCK_AVAILABLE_LEAGUES.reduce((sum, l) => sum + l.drivers, 0)}
|
|
</div>
|
|
<div className="text-sm text-gray-400">Total Drivers</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* League Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{filteredLeagues.map((league) => (
|
|
<LeagueCard key={league.id} league={league} />
|
|
))}
|
|
</div>
|
|
|
|
{filteredLeagues.length === 0 && (
|
|
<div className="text-center py-12">
|
|
<Trophy className="w-12 h-12 text-gray-500 mx-auto mb-4" />
|
|
<h3 className="text-lg font-medium text-white mb-2">No leagues found</h3>
|
|
<p className="text-gray-400">Try adjusting your filters to see more results</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Alpha Notice */}
|
|
<div className="mt-8 rounded-lg bg-warning-amber/10 border border-warning-amber/30 p-4">
|
|
<p className="text-xs text-gray-400">
|
|
<strong className="text-warning-amber">Alpha Note:</strong> League sponsorship marketplace is demonstration-only.
|
|
Actual sponsorship purchases will be available when the payment system is fully implemented.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |