website refactor
This commit is contained in:
@@ -17,8 +17,8 @@ import { Heading } from '@/ui/Heading';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Link } from '@/ui/Link';
|
||||
import { Grid } from '@/ui/Grid';
|
||||
import { GridItem } from '@/ui/GridItem';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import {
|
||||
Bell,
|
||||
Car,
|
||||
@@ -81,7 +81,7 @@ export function SponsorDashboardTemplate({ viewData }: SponsorDashboardTemplateP
|
||||
description: a.formattedImpressions ? `${a.formattedImpressions} impressions` : '',
|
||||
timestamp: a.time,
|
||||
icon: Clock,
|
||||
color: a.typeColor || 'text-primary-blue',
|
||||
color: a.typeColor || 'primary-accent',
|
||||
}));
|
||||
|
||||
return (
|
||||
@@ -97,7 +97,7 @@ export function SponsorDashboardTemplate({ viewData }: SponsorDashboardTemplateP
|
||||
<BillingSummaryPanel stats={billingStats} />
|
||||
|
||||
{/* Key Metrics */}
|
||||
<Grid cols={4} gap={4}>
|
||||
<Grid responsiveGridCols={{ base: 1, sm: 2, lg: 4 }} gap={4}>
|
||||
<MetricCard
|
||||
title="Total Impressions"
|
||||
value={viewData.totalImpressions}
|
||||
@@ -130,27 +130,30 @@ export function SponsorDashboardTemplate({ viewData }: SponsorDashboardTemplateP
|
||||
</Grid>
|
||||
|
||||
{/* Main Content Grid */}
|
||||
<Grid cols={12} gap={6}>
|
||||
<GridItem colSpan={12} lgSpan={8}>
|
||||
<Grid responsiveGridCols={{ base: 1, lg: 12 }} gap={6}>
|
||||
<Box responsiveColSpan={{ base: 1, lg: 8 }}>
|
||||
<Stack gap={6}>
|
||||
{/* Sponsorship Categories */}
|
||||
<Box>
|
||||
<Stack direction="row" align="center" justify="between" mb={4}>
|
||||
<Heading level={3}>Your Sponsorships</Heading>
|
||||
<Link href={routes.sponsor.campaigns}>
|
||||
<Button variant="secondary" size="sm" icon={<Icon icon={ChevronRight} size={4} />}>
|
||||
View All
|
||||
<Button variant="secondary" size="sm">
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Text>View All</Text>
|
||||
<Icon icon={ChevronRight} size={4} />
|
||||
</Stack>
|
||||
</Button>
|
||||
</Link>
|
||||
</Stack>
|
||||
|
||||
<Grid cols={5} gap={4}>
|
||||
<Grid responsiveGridCols={{ base: 2, md: 3, lg: 5 }} gap={4}>
|
||||
<SponsorshipCategoryCard
|
||||
icon={Trophy}
|
||||
title="Leagues"
|
||||
countLabel={categoryData.leagues.countLabel}
|
||||
impressionsLabel={categoryData.leagues.impressionsLabel}
|
||||
color="#3b82f6"
|
||||
color="primary-accent"
|
||||
href="/sponsor/campaigns?type=leagues"
|
||||
/>
|
||||
<SponsorshipCategoryCard
|
||||
@@ -158,7 +161,7 @@ export function SponsorDashboardTemplate({ viewData }: SponsorDashboardTemplateP
|
||||
title="Teams"
|
||||
countLabel={categoryData.teams.countLabel}
|
||||
impressionsLabel={categoryData.teams.impressionsLabel}
|
||||
color="#a855f7"
|
||||
color="var(--color-warning)"
|
||||
href="/sponsor/campaigns?type=teams"
|
||||
/>
|
||||
<SponsorshipCategoryCard
|
||||
@@ -166,7 +169,7 @@ export function SponsorDashboardTemplate({ viewData }: SponsorDashboardTemplateP
|
||||
title="Drivers"
|
||||
countLabel={categoryData.drivers.countLabel}
|
||||
impressionsLabel={categoryData.drivers.impressionsLabel}
|
||||
color="#10b981"
|
||||
color="var(--color-success)"
|
||||
href="/sponsor/campaigns?type=drivers"
|
||||
/>
|
||||
<SponsorshipCategoryCard
|
||||
@@ -174,7 +177,7 @@ export function SponsorDashboardTemplate({ viewData }: SponsorDashboardTemplateP
|
||||
title="Races"
|
||||
countLabel={categoryData.races.countLabel}
|
||||
impressionsLabel={categoryData.races.impressionsLabel}
|
||||
color="#f59e0b"
|
||||
color="var(--color-warning)"
|
||||
href="/sponsor/campaigns?type=races"
|
||||
/>
|
||||
<SponsorshipCategoryCard
|
||||
@@ -182,7 +185,7 @@ export function SponsorDashboardTemplate({ viewData }: SponsorDashboardTemplateP
|
||||
title="Platform Ads"
|
||||
countLabel={categoryData.platform.countLabel}
|
||||
impressionsLabel={categoryData.platform.impressionsLabel}
|
||||
color="#ef4444"
|
||||
color="critical-red"
|
||||
href="/sponsor/campaigns?type=platform"
|
||||
/>
|
||||
</Grid>
|
||||
@@ -193,12 +196,15 @@ export function SponsorDashboardTemplate({ viewData }: SponsorDashboardTemplateP
|
||||
<Stack direction="row" align="center" justify="between" mb={4}>
|
||||
<Heading level={3}>Top Performing</Heading>
|
||||
<Link href={routes.public.leagues}>
|
||||
<Button variant="secondary" size="sm" icon={<Icon icon={Plus} size={4} />}>
|
||||
Find More
|
||||
<Button variant="secondary" size="sm">
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Icon icon={Plus} size={4} />
|
||||
<Text>Find More</Text>
|
||||
</Stack>
|
||||
</Button>
|
||||
</Link>
|
||||
</Stack>
|
||||
<Grid cols={2} gap={4}>
|
||||
<Grid responsiveGridCols={{ base: 1, md: 2 }} gap={4}>
|
||||
<SponsorContractCard
|
||||
id="sample-1"
|
||||
type="league"
|
||||
@@ -226,9 +232,9 @@ export function SponsorDashboardTemplate({ viewData }: SponsorDashboardTemplateP
|
||||
</Grid>
|
||||
</Box>
|
||||
</Stack>
|
||||
</GridItem>
|
||||
</Box>
|
||||
|
||||
<GridItem colSpan={12} lgSpan={4}>
|
||||
<Box responsiveColSpan={{ base: 1, lg: 4 }}>
|
||||
<Stack gap={6}>
|
||||
{/* Recent Activity */}
|
||||
<SponsorActivityPanel activities={activities} />
|
||||
@@ -239,23 +245,35 @@ export function SponsorDashboardTemplate({ viewData }: SponsorDashboardTemplateP
|
||||
<Heading level={3}>Quick Actions</Heading>
|
||||
<Stack gap={2}>
|
||||
<Link href={routes.public.leagues}>
|
||||
<Button variant="secondary" fullWidth icon={<Icon icon={Trophy} size={4} />}>
|
||||
Find Leagues to Sponsor
|
||||
<Button variant="secondary" fullWidth>
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Icon icon={Trophy} size={4} />
|
||||
<Text>Find Leagues to Sponsor</Text>
|
||||
</Stack>
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={routes.public.teams}>
|
||||
<Button variant="secondary" fullWidth icon={<Icon icon={Users} size={4} />}>
|
||||
Browse Teams
|
||||
<Button variant="secondary" fullWidth>
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Icon icon={Users} size={4} />
|
||||
<Text>Browse Teams</Text>
|
||||
</Stack>
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={routes.public.drivers}>
|
||||
<Button variant="secondary" fullWidth icon={<Icon icon={Car} size={4} />}>
|
||||
Discover Drivers
|
||||
<Button variant="secondary" fullWidth>
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Icon icon={Car} size={4} />
|
||||
<Text>Discover Drivers</Text>
|
||||
</Stack>
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={routes.sponsor.billing}>
|
||||
<Button variant="secondary" fullWidth icon={<Icon icon={DollarSign} size={4} />}>
|
||||
Manage Billing
|
||||
<Button variant="secondary" fullWidth>
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Icon icon={DollarSign} size={4} />
|
||||
<Text>Manage Billing</Text>
|
||||
</Stack>
|
||||
</Button>
|
||||
</Link>
|
||||
</Stack>
|
||||
@@ -266,8 +284,11 @@ export function SponsorDashboardTemplate({ viewData }: SponsorDashboardTemplateP
|
||||
{viewData.upcomingRenewals.length > 0 && (
|
||||
<Card>
|
||||
<Stack gap={4}>
|
||||
<Heading level={3} icon={<Icon icon={Bell} size={5} color="#f59e0b" />}>
|
||||
Upcoming Renewals
|
||||
<Heading level={3}>
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Icon icon={Bell} size={5} color="warning-amber" />
|
||||
<Text>Upcoming Renewals</Text>
|
||||
</Stack>
|
||||
</Heading>
|
||||
<Stack gap={3}>
|
||||
{viewData.upcomingRenewals.map((renewal) => (
|
||||
@@ -278,7 +299,7 @@ export function SponsorDashboardTemplate({ viewData }: SponsorDashboardTemplateP
|
||||
</Card>
|
||||
)}
|
||||
</Stack>
|
||||
</GridItem>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Container>
|
||||
|
||||
Reference in New Issue
Block a user