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 13:39:24 +01:00
parent faa4c3309e
commit 8b67295442
28 changed files with 1082 additions and 851 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
apps/website/templates/LeagueSponsorshipsTemplate.tsx Normal file
View File

@@ -0,0 +1,168 @@
import { LeagueSponsorshipsViewData } from '@/lib/view-data/leagues/LeagueSponsorshipsViewData';
import { Card } from '@/ui/Card';
import { Section } from '@/ui/Section';
import { Building, DollarSign, Clock, CheckCircle, XCircle, AlertCircle } from 'lucide-react';
interface LeagueSponsorshipsTemplateProps {
viewData: LeagueSponsorshipsViewData;
}
export function LeagueSponsorshipsTemplate({ viewData }: LeagueSponsorshipsTemplateProps) {
return (
<Section>
<div className="flex items-center justify-between mb-6">
<div>
<h2 className="text-xl font-semibold text-white">Sponsorships</h2>
<p className="text-sm text-gray-400 mt-1">
Manage sponsorship slots and review requests
</p>
</div>
</div>
<div className="space-y-6">
{/* Sponsorship Slots */}
<Card>
<div className="flex items-center gap-3 mb-4">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-blue/10">
<Building className="w-5 h-5 text-primary-blue" />
</div>
<div>
<h3 className="text-lg font-semibold text-white">Sponsorship Slots</h3>
<p className="text-sm text-gray-400">Available sponsorship opportunities</p>
</div>
</div>
{viewData.sponsorshipSlots.length === 0 ? (
<div className="text-center py-8">
<Building className="w-12 h-12 mx-auto mb-4 text-gray-400" />
<p className="text-gray-400">No sponsorship slots available</p>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{viewData.sponsorshipSlots.map((slot) => (
<div
key={slot.id}
className={`rounded-lg border p-4 ${
slot.isAvailable
? 'border-performance-green bg-performance-green/5'
: 'border-charcoal-outline bg-iron-gray/30'
}`}
>
<div className="flex items-start justify-between mb-3">
<h4 className="font-semibold text-white">{slot.name}</h4>
<span className={`px-2 py-1 text-xs font-medium rounded-full ${
slot.isAvailable
? 'bg-performance-green/20 text-performance-green'
: 'bg-gray-500/20 text-gray-400'
}`}>
{slot.isAvailable ? 'Available' : 'Taken'}
</span>
</div>
<p className="text-sm text-gray-300 mb-3">{slot.description}</p>
<div className="flex items-center gap-2 mb-3">
<DollarSign className="w-4 h-4 text-gray-400" />
<span className="text-white font-semibold">
{slot.price} {slot.currency}
</span>
</div>
{!slot.isAvailable && slot.sponsoredBy && (
<div className="pt-3 border-t border-charcoal-outline">
<p className="text-xs text-gray-400 mb-1">Sponsored by</p>
<p className="text-sm font-medium text-white">{slot.sponsoredBy.name}</p>
</div>
)}
</div>
))}
</div>
)}
</Card>
{/* Sponsorship Requests */}
<Card>
<div className="flex items-center gap-3 mb-4">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-warning-amber/10">
<Clock className="w-5 h-5 text-warning-amber" />
</div>
<div>
<h3 className="text-lg font-semibold text-white">Sponsorship Requests</h3>
<p className="text-sm text-gray-400">Pending and processed sponsorship applications</p>
</div>
</div>
{viewData.sponsorshipRequests.length === 0 ? (
<div className="text-center py-8">
<Clock className="w-12 h-12 mx-auto mb-4 text-gray-400" />
<p className="text-gray-400">No sponsorship requests</p>
</div>
) : (
<div className="space-y-3">
{viewData.sponsorshipRequests.map((request) => {
const slot = viewData.sponsorshipSlots.find(s => s.id === request.slotId);
const statusIcon = {
pending: <AlertCircle className="w-5 h-5 text-warning-amber" />,
approved: <CheckCircle className="w-5 h-5 text-performance-green" />,
rejected: <XCircle className="w-5 h-5 text-red-400" />,
}[request.status];
const statusColor = {
pending: 'border-warning-amber bg-warning-amber/5',
approved: 'border-performance-green bg-performance-green/5',
rejected: 'border-red-400 bg-red-400/5',
}[request.status];
return (
<div
key={request.id}
className={`rounded-lg border p-4 ${statusColor}`}
>
<div className="flex items-start justify-between">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-3 mb-2">
{statusIcon}
<span className="font-semibold text-white">{request.sponsorName}</span>
<span className={`px-2 py-1 text-xs font-medium rounded-full ${
request.status === 'pending'
? 'bg-warning-amber/20 text-warning-amber'
: request.status === 'approved'
? 'bg-performance-green/20 text-performance-green'
: 'bg-red-400/20 text-red-400'
}`}>
{request.status}
</span>
</div>
<div className="text-sm text-gray-300 mb-2">
Requested: {slot?.name || 'Unknown slot'}
</div>
<div className="text-xs text-gray-400">
{new Date(request.requestedAt).toLocaleDateString()}
</div>
</div>
</div>
</div>
);
})}
</div>
)}
</Card>
{/* Note about management */}
<Card>
<div className="text-center py-8">
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-primary-blue/10 flex items-center justify-center">
<Building className="w-8 h-8 text-primary-blue" />
</div>
<h3 className="text-lg font-medium text-white mb-2">Sponsorship Management</h3>
<p className="text-sm text-gray-400">
Interactive management features for approving requests and managing slots will be implemented in future updates.
</p>
</div>
</Card>
</div>
</Section>
);
}