website refactor

apps/website/templates/SponsorLeagueDetailTemplate.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React from 'react';
 import {
   Trophy,
   Users,
@@ -13,7 +13,8 @@ import {
   BarChart3,
   Megaphone,
   CreditCard,
-  FileText
+  FileText,
+  type LucideIcon
 } from 'lucide-react';
 import { Card } from '@/ui/Card';
 import { Button } from '@/ui/Button';
@@ -32,7 +33,7 @@ import { SponsorTierCard } from '@/components/sponsors/SponsorTierCard';
 import { siteConfig } from '@/lib/siteConfig';
 import { routes } from '@/lib/routing/RouteConfig';
 
-interface SponsorLeagueDetailData {
+interface SponsorLeagueDetailViewData {
   league: {
     id: string;
     name: string;
@@ -97,16 +98,23 @@ interface SponsorLeagueDetailData {
   }>;
 }
 
+export type SponsorLeagueDetailTab = 'overview' | 'drivers' | 'races' | 'sponsor';
+
 interface SponsorLeagueDetailTemplateProps {
-  viewData: SponsorLeagueDetailData;
+  viewData: SponsorLeagueDetailViewData;
+  activeTab: SponsorLeagueDetailTab;
+  setActiveTab: (tab: SponsorLeagueDetailTab) => void;
+  selectedTier: 'main' | 'secondary';
+  setSelectedTier: (tier: 'main' | 'secondary') => void;
 }
 
-type TabType = 'overview' | 'drivers' | 'races' | 'sponsor';
-
-export function SponsorLeagueDetailTemplate({ viewData }: SponsorLeagueDetailTemplateProps) {
-  const [activeTab, setActiveTab] = useState<TabType>('overview');
-  const [selectedTier, setSelectedTier] = useState<'main' | 'secondary'>('main');
-
+export function SponsorLeagueDetailTemplate({ 
+  viewData,
+  activeTab,
+  setActiveTab,
+  selectedTier,
+  setSelectedTier
+}: SponsorLeagueDetailTemplateProps) {
   const league = viewData.league;
 
   return (
@@ -129,11 +137,11 @@ export function SponsorLeagueDetailTemplate({ viewData }: SponsorLeagueDetailTem
 
         {/* Header */}
         <Stack direction="row" align="start" justify="between" wrap gap={6}>
-          <Box style={{ flex: 1 }}>
+          <Box flexGrow={1}>
             <Stack direction="row" align="center" gap={3} mb={2}>
               <Badge variant="primary">⭐ {league.tier}</Badge>
               <Badge variant="success">Active Season</Badge>
-              <Surface variant="muted" rounded="lg" padding={1} style={{ backgroundColor: 'rgba(38, 38, 38, 0.5)', paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
+              <Surface variant="muted" rounded="lg" padding={1} bg="bg-neutral-800/50" px={2}>
                 <Stack direction="row" align="center" gap={1}>
                   <Icon icon={Star} size={3.5} color="#facc15" />
                   <Text size="sm" weight="medium" color="text-white">{league.rating}</Text>
@@ -144,13 +152,13 @@ export function SponsorLeagueDetailTemplate({ viewData }: SponsorLeagueDetailTem
             <Text color="text-gray-400" block mt={2}>
               {league.game} • {league.season} • {league.completedRaces}/{league.races} races completed
             </Text>
-            <Text color="text-gray-400" block mt={4} style={{ maxWidth: '42rem' }}>
+            <Text color="text-gray-400" block mt={4} maxWidth="42rem">
               {league.description}
             </Text>
           </Box>
           
           <Stack direction="row" gap={3}>
-            <Link href={`/leagues/${league.id}`}>
+            <Link href={routes.league.detail(league.id)}>
               <Button variant="secondary" icon={<Icon icon={ExternalLink} size={4} />}>
                 View League
               </Button>
@@ -173,20 +181,19 @@ export function SponsorLeagueDetailTemplate({ viewData }: SponsorLeagueDetailTem
         </Grid>
 
         {/* Tabs */}
-        <Box style={{ borderBottom: '1px solid #262626' }}>
+        <Box borderBottom borderColor="border-neutral-800">
           <Stack direction="row" gap={6}>
             {(['overview', 'drivers', 'races', 'sponsor'] as const).map((tab) => (
               <Box
                 key={tab}
                 onClick={() => setActiveTab(tab)}
                 pb={3}
-                style={{ 
-                  cursor: 'pointer',
-                  borderBottom: activeTab === tab ? '2px solid #3b82f6' : '2px solid transparent',
-                  color: activeTab === tab ? '#3b82f6' : '#9ca3af'
-                }}
+                cursor="pointer"
+                borderBottom={activeTab === tab}
+                borderColor={activeTab === tab ? 'border-primary-blue' : 'border-transparent'}
+                color={activeTab === tab ? 'text-primary-blue' : 'text-gray-400'}
               >
-                <Text size="sm" weight="medium" style={{ textTransform: 'capitalize' }}>
+                <Text size="sm" weight="medium" uppercase>
                   {tab === 'sponsor' ? '🎯 Become a Sponsor' : tab}
                 </Text>
               </Box>
@@ -235,10 +242,10 @@ export function SponsorLeagueDetailTemplate({ viewData }: SponsorLeagueDetailTem
                       Next Race
                     </Heading>
                   </Box>
-                  <Surface variant="muted" rounded="lg" border padding={4} style={{ backgroundColor: 'rgba(245, 158, 11, 0.05)', borderColor: 'rgba(245, 158, 11, 0.2)' }}>
+                  <Surface variant="muted" rounded="lg" border padding={4} bg="bg-warning-amber/5" borderColor="border-warning-amber/20">
                     <Stack direction="row" align="center" justify="between">
                       <Stack direction="row" align="center" gap={4}>
-                        <Surface variant="muted" rounded="lg" padding={3} style={{ backgroundColor: 'rgba(245, 158, 11, 0.1)' }}>
+                        <Surface variant="muted" rounded="lg" padding={3} bg="bg-warning-amber/10">
                           <Icon icon={Flag} size={6} color="#f59e0b" />
                         </Surface>
                         <Box>
@@ -259,16 +266,16 @@ export function SponsorLeagueDetailTemplate({ viewData }: SponsorLeagueDetailTem
 
         {activeTab === 'drivers' && (
           <Card p={0}>
-            <Box p={4} style={{ borderBottom: '1px solid #262626' }}>
+            <Box p={4} borderBottom borderColor="border-neutral-800">
               <Heading level={2}>Championship Standings</Heading>
               <Text size="sm" color="text-gray-400" block mt={1}>Top drivers carrying sponsor branding</Text>
             </Box>
             <Stack gap={0}>
               {viewData.drivers.map((driver, index) => (
-                <Box key={driver.id} p={4} style={{ borderBottom: index < viewData.drivers.length - 1 ? '1px solid rgba(38, 38, 38, 0.5)' : 'none' }}>
+                <Box key={driver.id} p={4} borderBottom={index < viewData.drivers.length - 1} borderColor="border-neutral-800/50">
                   <Stack direction="row" align="center" justify="between">
                     <Stack direction="row" align="center" gap={4}>
-                      <Surface variant="muted" rounded="full" padding={1} style={{ width: '2.5rem', height: '2.5rem', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#262626' }}>
+                      <Surface variant="muted" rounded="full" padding={1} w="10" h="10" display="flex" alignItems="center" justifyContent="center" bg="bg-neutral-800">
                         <Text weight="bold" color="text-white">{driver.position}</Text>
                       </Surface>
                       <Box>
@@ -277,11 +284,11 @@ export function SponsorLeagueDetailTemplate({ viewData }: SponsorLeagueDetailTem
                       </Box>
                     </Stack>
                     <Stack direction="row" align="center" gap={8}>
-                      <Box style={{ textAlign: 'right' }}>
+                      <Box textAlign="right">
                         <Text weight="medium" color="text-white" block>{driver.races}</Text>
                         <Text size="xs" color="text-gray-500">races</Text>
                       </Box>
-                      <Box style={{ textAlign: 'right' }}>
+                      <Box textAlign="right">
                         <Text weight="semibold" color="text-white" block>{driver.formattedImpressions}</Text>
                         <Text size="xs" color="text-gray-500">views</Text>
                       </Box>
@@ -295,16 +302,16 @@ export function SponsorLeagueDetailTemplate({ viewData }: SponsorLeagueDetailTem
 
         {activeTab === 'races' && (
           <Card p={0}>
-            <Box p={4} style={{ borderBottom: '1px solid #262626' }}>
+            <Box p={4} borderBottom borderColor="border-neutral-800">
               <Heading level={2}>Race Calendar</Heading>
               <Text size="sm" color="text-gray-400" block mt={1}>Season schedule with view statistics</Text>
             </Box>
             <Stack gap={0}>
               {viewData.races.map((race, index) => (
-                <Box key={race.id} p={4} style={{ borderBottom: index < viewData.races.length - 1 ? '1px solid rgba(38, 38, 38, 0.5)' : 'none' }}>
+                <Box key={race.id} p={4} borderBottom={index < viewData.races.length - 1} borderColor="border-neutral-800/50">
                   <Stack direction="row" align="center" justify="between">
                     <Stack direction="row" align="center" gap={4}>
-                      <Box style={{ width: '0.75rem', height: '0.75rem', borderRadius: '9999px', backgroundColor: race.status === 'completed' ? '#10b981' : '#f59e0b' }} />
+                      <Box w="3" h="3" rounded="full" bg={race.status === 'completed' ? 'bg-performance-green' : 'bg-warning-amber'} />
                       <Box>
                         <Text weight="medium" color="text-white" block>{race.name}</Text>
                         <Text size="sm" color="text-gray-500" block mt={1}>{race.formattedDate}</Text>
@@ -312,7 +319,7 @@ export function SponsorLeagueDetailTemplate({ viewData }: SponsorLeagueDetailTem
                     </Stack>
                     <Box>
                       {race.status === 'completed' ? (
-                        <Box style={{ textAlign: 'right' }}>
+                        <Box textAlign="right">
                           <Text weight="semibold" color="text-white" block>{race.views.toLocaleString()}</Text>
                           <Text size="xs" color="text-gray-500">views</Text>
                         </Box>
@@ -361,7 +368,7 @@ export function SponsorLeagueDetailTemplate({ viewData }: SponsorLeagueDetailTem
                 <InfoRow label="Selected Tier" value={`${selectedTier.charAt(0).toUpperCase() + selectedTier.slice(1)} Sponsor`} />
                 <InfoRow label="Season Price" value={`$${selectedTier === 'main' ? league.sponsorSlots.main.price : league.sponsorSlots.secondary.price}`} />
                 <InfoRow label={`Platform Fee (${siteConfig.fees.platformFeePercent}%)`} value={`$${((selectedTier === 'main' ? league.sponsorSlots.main.price : league.sponsorSlots.secondary.price) * siteConfig.fees.platformFeePercent / 100).toFixed(2)}`} />
-                <Box pt={4} style={{ borderTop: '1px solid #262626' }}>
+                <Box pt={4} borderTop borderColor="border-neutral-800">
                   <Stack direction="row" align="center" justify="between">
                     <Text weight="semibold" color="text-white">Total (excl. VAT)</Text>
                     <Text size="xl" weight="bold" color="text-white">
@@ -391,11 +398,11 @@ export function SponsorLeagueDetailTemplate({ viewData }: SponsorLeagueDetailTem
   );
 }
 
-function StatCard({ icon, label, value, color }: { icon: any, label: string, value: string | number, color: string }) {
+function StatCard({ icon, label, value, color }: { icon: LucideIcon, label: string, value: string | number, color: string }) {
   return (
     <Card>
       <Stack direction="row" align="center" gap={3}>
-        <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: `${color}1A` }}>
+        <Surface variant="muted" rounded="lg" padding={2} bg={`${color}1A`}>
           <Icon icon={icon} size={5} color={color} />
         </Surface>
         <Box>
@@ -409,10 +416,10 @@ function StatCard({ icon, label, value, color }: { icon: any, label: string, val
 
 function InfoRow({ label, value, color = 'text-white', last }: { label: string, value: string | number, color?: string, last?: boolean }) {
   return (
-    <Box py={2} style={{ borderBottom: last ? 'none' : '1px solid rgba(38, 38, 38, 0.5)' }}>
+    <Box py={2} borderBottom={!last} borderColor="border-neutral-800/50">
       <Stack direction="row" align="center" justify="between">
         <Text color="text-gray-400">{label}</Text>
-        <Text weight="medium" color={color as any}>{value}</Text>
+        <Text weight="medium" color={color}>{value}</Text>
       </Stack>
     </Box>
   );