website refactor

apps/website/templates/LeagueSponsorshipsTemplate.tsx

@@ -1,7 +1,18 @@
-import { LeagueSponsorshipsViewData } from '@/lib/view-data/leagues/LeagueSponsorshipsViewData';
+'use client';
+
+import React from 'react';
 import { Card } from '@/ui/Card';
-import { Section } from '@/ui/Section';
-import { Building, DollarSign, Clock, CheckCircle, XCircle, AlertCircle } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Grid } from '@/ui/Grid';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
+import { Building, Clock } from 'lucide-react';
+import type { LeagueSponsorshipsViewData } from '@/lib/view-data/leagues/LeagueSponsorshipsViewData';
+import { SponsorshipSlotCard } from '@/components/leagues/SponsorshipSlotCard';
+import { SponsorshipRequestCard } from '@/components/leagues/SponsorshipRequestCard';
 
 interface LeagueSponsorshipsTemplateProps {
   viewData: LeagueSponsorshipsViewData;
@@ -9,160 +20,96 @@ interface LeagueSponsorshipsTemplateProps {
 
 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>
+    <Stack gap={6}>
+      <Box>
+        <Heading level={2}>Sponsorships</Heading>
+        <Text size="sm" color="text-gray-400" block mt={1}>
+          Manage sponsorship slots and review requests
+        </Text>
+      </Box>
 
-      <div className="space-y-6">
+      <Stack gap={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>
+          <Stack gap={4}>
+            <Stack direction="row" align="center" gap={3}>
+              <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)' }}>
+                <Icon icon={Building} size={5} color="#3b82f6" />
+              </Surface>
+              <Box>
+                <Heading level={3}>Sponsorship Slots</Heading>
+                <Text size="sm" color="text-gray-400">Available sponsorship opportunities</Text>
+              </Box>
+            </Stack>
 
-          {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>
-          )}
+            {viewData.sponsorshipSlots.length === 0 ? (
+              <Stack align="center" py={8} gap={4}>
+                <Icon icon={Building} size={12} color="#525252" />
+                <Text color="text-gray-400">No sponsorship slots available</Text>
+              </Stack>
+            ) : (
+              <Grid cols={3} gap={4}>
+                {viewData.sponsorshipSlots.map((slot) => (
+                  <SponsorshipSlotCard key={slot.id} slot={slot} />
+                ))}
+              </Grid>
+            )}
+          </Stack>
         </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>
+          <Stack gap={4}>
+            <Stack direction="row" align="center" gap={3}>
+              <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(245, 158, 11, 0.1)' }}>
+                <Icon icon={Clock} size={5} color="#f59e0b" />
+              </Surface>
+              <Box>
+                <Heading level={3}>Sponsorship Requests</Heading>
+                <Text size="sm" color="text-gray-400">Pending and processed sponsorship applications</Text>
+              </Box>
+            </Stack>
 
-          {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>
-          )}
+            {viewData.sponsorshipRequests.length === 0 ? (
+              <Stack align="center" py={8} gap={4}>
+                <Icon icon={Clock} size={12} color="#525252" />
+                <Text color="text-gray-400">No sponsorship requests</Text>
+              </Stack>
+            ) : (
+              <Stack gap={3}>
+                {viewData.sponsorshipRequests.map((request) => {
+                  const slot = viewData.sponsorshipSlots.find(s => s.id === request.slotId);
+                  return (
+                    <SponsorshipRequestCard 
+                      key={request.id} 
+                      request={{
+                        ...request,
+                        status: request.status as any,
+                        slotName: slot?.name || 'Unknown slot'
+                      }} 
+                    />
+                  );
+                })}
+              </Stack>
+            )}
+          </Stack>
         </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>
+          <Stack align="center" py={8} gap={4}>
+            <Surface variant="muted" rounded="full" padding={4} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)' }}>
+              <Icon icon={Building} size={8} color="#3b82f6" />
+            </Surface>
+            <Box style={{ textAlign: 'center' }}>
+              <Heading level={3}>Sponsorship Management</Heading>
+              <Text size="sm" color="text-gray-400" block mt={2}>
+                Interactive management features for approving requests and managing slots will be implemented in future updates.
+              </Text>
+            </Box>
+          </Stack>
         </Card>
-      </div>
-    </Section>
+      </Stack>
+    </Stack>
   );
-}
+}