website refactor

This commit is contained in:
2026-01-15 18:52:03 +01:00
parent f035cfe7ce
commit 5ef149b782
39 changed files with 564 additions and 518 deletions

View File

@@ -1,6 +1,6 @@
'use client';
import React, { useState } from 'react';
import React from 'react';
import { Card } from '@/ui/Card';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
@@ -20,7 +20,7 @@ interface LeagueSponsorshipsTemplateProps {
}
export function LeagueSponsorshipsTemplate({ viewData }: LeagueSponsorshipsTemplateProps) {
const [activeTab, setActiveTab] = useState<'overview' | 'editor'>('overview');
const activeTab = viewData.activeTab;
return (
<Stack gap={6}>
@@ -32,26 +32,36 @@ export function LeagueSponsorshipsTemplate({ viewData }: LeagueSponsorshipsTempl
</Text>
</Box>
<Stack direction="row" gap={2}>
<button
onClick={() => setActiveTab('overview')}
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
activeTab === 'overview'
? 'bg-primary-blue text-white'
: 'bg-iron-gray text-gray-400 hover:text-white'
}`}
<Box
as="button"
onClick={() => viewData.onTabChange('overview')}
px={4}
py={2}
rounded="lg"
size="sm"
weight="medium"
bg={activeTab === 'overview' ? 'bg-primary-blue' : 'bg-iron-gray'}
color={activeTab === 'overview' ? 'text-white' : 'text-gray-400'}
cursor="pointer"
borderStyle="none"
>
Overview
</button>
<button
onClick={() => setActiveTab('editor')}
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
activeTab === 'editor'
? 'bg-primary-blue text-white'
: 'bg-iron-gray text-gray-400 hover:text-white'
}`}
</Box>
<Box
as="button"
onClick={() => viewData.onTabChange('editor')}
px={4}
py={2}
rounded="lg"
size="sm"
weight="medium"
bg={activeTab === 'editor' ? 'bg-primary-blue' : 'bg-iron-gray'}
color={activeTab === 'editor' ? 'text-white' : 'text-gray-400'}
cursor="pointer"
borderStyle="none"
>
Livery Editor
</button>
</Box>
</Stack>
</Stack>
@@ -61,7 +71,7 @@ export function LeagueSponsorshipsTemplate({ viewData }: LeagueSponsorshipsTempl
<Card>
<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)' }}>
<Surface variant="muted" rounded="lg" padding={2} bg="bg-blue-500/10">
<Icon icon={Building} size={5} color="#3b82f6" />
</Surface>
<Box>
@@ -89,7 +99,7 @@ export function LeagueSponsorshipsTemplate({ viewData }: LeagueSponsorshipsTempl
<Card>
<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)' }}>
<Surface variant="muted" rounded="lg" padding={2} bg="bg-amber-500/10">
<Icon icon={Clock} size={5} color="#f59e0b" />
</Surface>
<Box>
@@ -112,7 +122,6 @@ export function LeagueSponsorshipsTemplate({ viewData }: LeagueSponsorshipsTempl
key={request.id}
request={{
...request,
status: request.status as any,
slotName: slot?.name || 'Unknown slot'
}}
/>
@@ -127,7 +136,7 @@ export function LeagueSponsorshipsTemplate({ viewData }: LeagueSponsorshipsTempl
<Card>
<Stack gap={6}>
<Stack direction="row" align="center" gap={3}>
<Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(168, 85, 247, 0.1)' }}>
<Surface variant="muted" rounded="lg" padding={2} bg="bg-purple-500/10">
<Icon icon={Palette} size={5} color="#a855f7" />
</Surface>
<Box>