website refactor
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user