website refactor
This commit is contained in:
@@ -1,3 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
|
||||
interface ActivityItemProps {
|
||||
activity: {
|
||||
id: string;
|
||||
@@ -8,22 +13,22 @@ interface ActivityItemProps {
|
||||
};
|
||||
}
|
||||
|
||||
export default function ActivityItem({ activity }: ActivityItemProps) {
|
||||
export function ActivityItem({ activity }: ActivityItemProps) {
|
||||
return (
|
||||
<div className="flex items-start gap-3 py-3 border-b border-charcoal-outline/50 last:border-b-0">
|
||||
<div className={`w-2 h-2 rounded-full mt-2 ${activity.typeColor}`} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-white truncate">{activity.message}</p>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-xs text-gray-500">{activity.time}</span>
|
||||
<Stack direction="row" align="start" gap={3} style={{ padding: '0.75rem 0', borderBottom: '1px solid rgba(38, 38, 38, 0.5)' }}>
|
||||
<Box style={{ width: '0.5rem', height: '0.5rem', borderRadius: '9999px', marginTop: '0.5rem', backgroundColor: activity.typeColor }} />
|
||||
<Box style={{ flex: 1, minWidth: 0 }}>
|
||||
<Text size="sm" color="text-white" style={{ display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{activity.message}</Text>
|
||||
<Stack direction="row" align="center" gap={2} style={{ marginTop: '0.25rem' }}>
|
||||
<Text size="xs" color="text-gray-500">{activity.time}</Text>
|
||||
{activity.formattedImpressions && (
|
||||
<>
|
||||
<span className="text-xs text-gray-600">•</span>
|
||||
<span className="text-xs text-gray-400">{activity.formattedImpressions} views</span>
|
||||
<Text size="xs" color="text-gray-600">•</Text>
|
||||
<Text size="xs" color="text-gray-400">{activity.formattedImpressions} views</Text>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
163
apps/website/components/sponsors/AvailableLeagueCard.tsx
Normal file
163
apps/website/components/sponsors/AvailableLeagueCard.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Star, Clock, CheckCircle2, ChevronRight } from 'lucide-react';
|
||||
import { Card } from '@/ui/Card';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Badge } from '@/ui/Badge';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Surface } from '@/ui/Surface';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Link } from '@/ui/Link';
|
||||
|
||||
interface AvailableLeague {
|
||||
id: string;
|
||||
name: string;
|
||||
game: string;
|
||||
drivers: number;
|
||||
avgViewsPerRace: number;
|
||||
mainSponsorSlot: { available: boolean; price: number };
|
||||
secondarySlots: { available: number; total: number; price: number };
|
||||
rating: number;
|
||||
tier: 'premium' | 'standard' | 'starter';
|
||||
nextRace?: string;
|
||||
seasonStatus: 'active' | 'upcoming' | 'completed';
|
||||
description: string;
|
||||
formattedAvgViews: string;
|
||||
formattedCpm: string;
|
||||
}
|
||||
|
||||
interface AvailableLeagueCardProps {
|
||||
league: AvailableLeague;
|
||||
}
|
||||
|
||||
export function AvailableLeagueCard({ league }: AvailableLeagueCardProps) {
|
||||
const tierConfig = {
|
||||
premium: { icon: '⭐', label: 'Premium' },
|
||||
standard: { icon: '🏆', label: 'Standard' },
|
||||
starter: { icon: '🚀', label: 'Starter' },
|
||||
};
|
||||
|
||||
const statusConfig = {
|
||||
active: { color: '#10b981', label: 'Active Season' },
|
||||
upcoming: { color: '#f59e0b', label: 'Starting Soon' },
|
||||
completed: { color: '#9ca3af', label: 'Season Ended' },
|
||||
};
|
||||
|
||||
const config = tierConfig[league.tier];
|
||||
const status = statusConfig[league.seasonStatus];
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Stack gap={4}>
|
||||
{/* Header */}
|
||||
<Stack direction="row" align="start" justify="between">
|
||||
<Box style={{ flex: 1 }}>
|
||||
<Stack direction="row" align="center" gap={2} mb={1} wrap>
|
||||
<Badge variant="primary">{config.icon} {config.label}</Badge>
|
||||
<Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: `${status.color}1A`, paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
|
||||
<Text size="xs" weight="medium" style={{ color: status.color }}>{status.label}</Text>
|
||||
</Surface>
|
||||
</Stack>
|
||||
<Heading level={3}>{league.name}</Heading>
|
||||
<Text size="sm" color="text-gray-500" block mt={1}>{league.game}</Text>
|
||||
</Box>
|
||||
<Surface variant="muted" rounded="lg" padding={1} style={{ backgroundColor: 'rgba(38, 38, 38, 0.5)', paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
|
||||
<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>
|
||||
</Stack>
|
||||
</Surface>
|
||||
</Stack>
|
||||
|
||||
{/* Description */}
|
||||
<Text size="sm" color="text-gray-400" block truncate>{league.description}</Text>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<Box style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: '0.5rem' }}>
|
||||
<StatItem label="Drivers" value={league.drivers} />
|
||||
<StatItem label="Avg Views" value={league.formattedAvgViews} />
|
||||
<StatItem label="CPM" value={league.formattedCpm} color="#10b981" />
|
||||
</Box>
|
||||
|
||||
{/* Next Race */}
|
||||
{league.nextRace && (
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Icon icon={Clock} size={4} color="#9ca3af" />
|
||||
<Text size="sm" color="text-gray-400">Next:</Text>
|
||||
<Text size="sm" color="text-white">{league.nextRace}</Text>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{/* Sponsorship Slots */}
|
||||
<Stack gap={2}>
|
||||
<SlotRow
|
||||
label="Main Sponsor"
|
||||
available={league.mainSponsorSlot.available}
|
||||
price={`$${league.mainSponsorSlot.price}/season`}
|
||||
/>
|
||||
<SlotRow
|
||||
label="Secondary Slots"
|
||||
available={league.secondarySlots.available > 0}
|
||||
price={`${league.secondarySlots.available}/${league.secondarySlots.total} @ $${league.secondarySlots.price}`}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
{/* Actions */}
|
||||
<Stack direction="row" gap={2}>
|
||||
<Box style={{ flex: 1 }}>
|
||||
<Link href={`/sponsor/leagues/${league.id}`}>
|
||||
<Button variant="secondary" fullWidth size="sm">
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
{(league.mainSponsorSlot.available || league.secondarySlots.available > 0) && (
|
||||
<Box style={{ flex: 1 }}>
|
||||
<Link href={`/sponsor/leagues/${league.id}?action=sponsor`}>
|
||||
<Button variant="primary" fullWidth size="sm">
|
||||
Sponsor
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function StatItem({ label, value, color = 'white' }: { label: string, value: string | number, color?: string }) {
|
||||
return (
|
||||
<Box p={2} style={{ backgroundColor: 'rgba(38, 38, 38, 0.5)', borderRadius: '0.5rem', textAlign: 'center' }}>
|
||||
<Text weight="bold" color="text-white" style={{ color: color !== 'white' ? color : undefined }}>{value}</Text>
|
||||
<Text size="xs" color="text-gray-500" block mt={1}>{label}</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function SlotRow({ label, available, price }: { label: string, available: boolean, price: string }) {
|
||||
return (
|
||||
<Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(38, 38, 38, 0.3)' }}>
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Box style={{ width: '0.625rem', height: '0.625rem', borderRadius: '9999px', backgroundColor: available ? '#10b981' : '#ef4444' }} />
|
||||
<Text size="sm" color="text-gray-300">{label}</Text>
|
||||
</Stack>
|
||||
<Box>
|
||||
{available ? (
|
||||
<Text size="sm" weight="semibold" color="text-white">{price}</Text>
|
||||
) : (
|
||||
<Stack direction="row" align="center" gap={1}>
|
||||
<Icon icon={CheckCircle2} size={3} color="#737373" />
|
||||
<Text size="sm" color="text-gray-500">Filled</Text>
|
||||
</Stack>
|
||||
)}
|
||||
</Box>
|
||||
</Stack>
|
||||
</Surface>
|
||||
);
|
||||
}
|
||||
@@ -1,18 +1,22 @@
|
||||
import React from 'react';
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import { ArrowUpRight, ArrowDownRight } from 'lucide-react';
|
||||
import Card from '@/components/ui/Card';
|
||||
import { ArrowUpRight, ArrowDownRight, LucideIcon } from 'lucide-react';
|
||||
import { Card } from '@/ui/Card';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
|
||||
interface MetricCardProps {
|
||||
title: string;
|
||||
value: number | string;
|
||||
change?: number;
|
||||
icon: React.ElementType;
|
||||
icon: LucideIcon;
|
||||
suffix?: string;
|
||||
prefix?: string;
|
||||
delay?: number;
|
||||
}
|
||||
|
||||
export default function MetricCard({
|
||||
export function MetricCard({
|
||||
title,
|
||||
value,
|
||||
change,
|
||||
@@ -30,26 +34,29 @@ export default function MetricCard({
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay }}
|
||||
style={{ height: '100%' }}
|
||||
>
|
||||
<Card className="p-5 h-full">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-primary-blue/10">
|
||||
<Icon className="w-5 h-5 text-primary-blue" />
|
||||
</div>
|
||||
{change !== undefined && (
|
||||
<div className={`flex items-center gap-1 text-sm font-medium ${
|
||||
isPositive ? 'text-performance-green' : isNegative ? 'text-racing-red' : 'text-gray-400'
|
||||
}`}>
|
||||
{isPositive ? <ArrowUpRight className="w-4 h-4" /> : isNegative ? <ArrowDownRight className="w-4 h-4" /> : null}
|
||||
{Math.abs(change)}%
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-white mb-1">
|
||||
{prefix}{typeof value === 'number' ? value.toLocaleString() : value}{suffix}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">{title}</div>
|
||||
<Card style={{ height: '100%', padding: '1.25rem' }}>
|
||||
<Stack gap={3}>
|
||||
<Stack direction="row" align="start" justify="between">
|
||||
<Box style={{ display: 'flex', height: '2.75rem', width: '2.75rem', alignItems: 'center', justifyContent: 'center', borderRadius: '0.75rem', backgroundColor: 'rgba(59, 130, 246, 0.1)' }}>
|
||||
<Icon style={{ width: '1.25rem', height: '1.25rem', color: '#3b82f6' }} />
|
||||
</Box>
|
||||
{change !== undefined && (
|
||||
<Stack direction="row" align="center" gap={1} style={{ fontSize: '0.875rem', fontWeight: 500, color: isPositive ? '#10b981' : isNegative ? '#ef4444' : '#9ca3af' }}>
|
||||
{isPositive ? <ArrowUpRight style={{ width: '1rem', height: '1rem' }} /> : isNegative ? <ArrowDownRight style={{ width: '1rem', height: '1rem' }} /> : null}
|
||||
<Text size="sm" weight="medium">{Math.abs(change)}%</Text>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
<Box>
|
||||
<Text size="2xl" weight="bold" color="text-white" style={{ marginBottom: '0.25rem', display: 'block' }}>
|
||||
{prefix}{typeof value === 'number' ? value.toLocaleString() : value}{suffix}
|
||||
</Text>
|
||||
<Text size="sm" color="text-gray-400">{title}</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Card>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Card from '@/ui/Card';
|
||||
import Button from '@/ui/Button';
|
||||
import { Clock, Check, X, DollarSign, MessageCircle, User, Building } from 'lucide-react';
|
||||
|
||||
export interface PendingRequestDTO {
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
import { Trophy, Users, Car, Flag, Megaphone } from 'lucide-react';
|
||||
import Button from '@/components/ui/Button';
|
||||
import React from 'react';
|
||||
import { Trophy, Users, Car, Flag, Megaphone, LucideIcon } from 'lucide-react';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
|
||||
interface RenewalAlertProps {
|
||||
renewal: {
|
||||
@@ -11,8 +15,8 @@ interface RenewalAlertProps {
|
||||
};
|
||||
}
|
||||
|
||||
export default function RenewalAlert({ renewal }: RenewalAlertProps) {
|
||||
const typeIcons = {
|
||||
export function RenewalAlert({ renewal }: RenewalAlertProps) {
|
||||
const typeIcons: Record<string, LucideIcon> = {
|
||||
league: Trophy,
|
||||
team: Users,
|
||||
driver: Car,
|
||||
@@ -22,20 +26,20 @@ export default function RenewalAlert({ renewal }: RenewalAlertProps) {
|
||||
const Icon = typeIcons[renewal.type] || Trophy;
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between p-3 rounded-lg bg-warning-amber/10 border border-warning-amber/30">
|
||||
<div className="flex items-center gap-3">
|
||||
<Icon className="w-4 h-4 text-warning-amber" />
|
||||
<div>
|
||||
<p className="text-sm text-white">{renewal.name}</p>
|
||||
<p className="text-xs text-gray-400">Renews {renewal.formattedRenewDate}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm font-semibold text-white">{renewal.formattedPrice}</p>
|
||||
<Button variant="secondary" className="text-xs mt-1 py-1 px-2 min-h-0">
|
||||
<Stack direction="row" align="center" justify="between" style={{ padding: '0.75rem', borderRadius: '0.5rem', backgroundColor: 'rgba(245, 158, 11, 0.1)', border: '1px solid rgba(245, 158, 11, 0.3)' }}>
|
||||
<Stack direction="row" align="center" gap={3}>
|
||||
<Icon style={{ width: '1rem', height: '1rem', color: '#f59e0b' }} />
|
||||
<Box>
|
||||
<Text size="sm" color="text-white" style={{ display: 'block' }}>{renewal.name}</Text>
|
||||
<Text size="xs" color="text-gray-400">Renews {renewal.formattedRenewDate}</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Box style={{ textAlign: 'right' }}>
|
||||
<Text size="sm" weight="semibold" color="text-white" style={{ display: 'block' }}>{renewal.formattedPrice}</Text>
|
||||
<Button variant="secondary" style={{ fontSize: '0.75rem', marginTop: '0.25rem', padding: '0.25rem 0.5rem', minHeight: 0 }}>
|
||||
Renew
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import Button from '@/components/ui/Button';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/ui/Button';
|
||||
import Card from '@/ui/Card';
|
||||
import { useInject } from '@/lib/di/hooks/useInject';
|
||||
import { SPONSOR_SERVICE_TOKEN } from '@/lib/di/tokens';
|
||||
import {
|
||||
|
||||
30
apps/website/components/sponsors/SponsorLogo.tsx
Normal file
30
apps/website/components/sponsors/SponsorLogo.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* SponsorLogo
|
||||
*
|
||||
* Pure UI component for displaying sponsor logos.
|
||||
* Renders an optimized image with fallback on error.
|
||||
*/
|
||||
|
||||
import Image from 'next/image';
|
||||
|
||||
export interface SponsorLogoProps {
|
||||
sponsorId: string;
|
||||
alt: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function SponsorLogo({ sponsorId, alt, className = '' }: SponsorLogoProps) {
|
||||
return (
|
||||
<Image
|
||||
src={`/media/sponsors/${sponsorId}/logo`}
|
||||
alt={alt}
|
||||
width={100}
|
||||
height={100}
|
||||
className={`object-contain ${className}`}
|
||||
onError={(e) => {
|
||||
// Fallback to default logo
|
||||
(e.target as HTMLImageElement).src = '/default-sponsor-logo.png';
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
96
apps/website/components/sponsors/SponsorTierCard.tsx
Normal file
96
apps/website/components/sponsors/SponsorTierCard.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Trophy, Star, CheckCircle2 } from 'lucide-react';
|
||||
import { Card } from '@/ui/Card';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Badge } from '@/ui/Badge';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Surface } from '@/ui/Surface';
|
||||
|
||||
interface SponsorTierCardProps {
|
||||
type: 'main' | 'secondary';
|
||||
available: boolean;
|
||||
availableCount?: number;
|
||||
totalCount?: number;
|
||||
price: number;
|
||||
benefits: string[];
|
||||
isSelected: boolean;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
export function SponsorTierCard({
|
||||
type,
|
||||
available,
|
||||
availableCount,
|
||||
totalCount,
|
||||
price,
|
||||
benefits,
|
||||
isSelected,
|
||||
onClick,
|
||||
}: SponsorTierCardProps) {
|
||||
const isMain = type === 'main';
|
||||
const TierIcon = isMain ? Trophy : Star;
|
||||
const iconColor = isMain ? '#facc15' : '#a78bfa';
|
||||
|
||||
return (
|
||||
<Surface
|
||||
variant="muted"
|
||||
rounded="xl"
|
||||
border
|
||||
padding={5}
|
||||
style={{
|
||||
cursor: available ? 'pointer' : 'default',
|
||||
opacity: available ? 1 : 0.6,
|
||||
borderColor: isSelected ? '#3b82f6' : '#262626',
|
||||
boxShadow: isSelected ? '0 0 0 2px rgba(59, 130, 246, 0.2)' : 'none'
|
||||
}}
|
||||
onClick={available ? onClick : undefined}
|
||||
>
|
||||
<Stack direction="row" align="start" justify="between" mb={4}>
|
||||
<Box>
|
||||
<Stack direction="row" align="center" gap={2} mb={1}>
|
||||
<Icon icon={TierIcon} size={5} color={iconColor} />
|
||||
<Heading level={3}>{isMain ? 'Main Sponsor' : 'Secondary Sponsor'}</Heading>
|
||||
</Stack>
|
||||
<Text size="sm" color="text-gray-400">
|
||||
{isMain ? 'Primary branding position' : 'Supporting branding position'}
|
||||
</Text>
|
||||
</Box>
|
||||
<Badge variant={available ? 'success' : 'default'}>
|
||||
{isMain
|
||||
? (available ? 'Available' : 'Filled')
|
||||
: (available ? `${availableCount}/${totalCount} Available` : 'Full')
|
||||
}
|
||||
</Badge>
|
||||
</Stack>
|
||||
|
||||
<Box mb={4}>
|
||||
<Text size="3xl" weight="bold" color="text-white">
|
||||
${price}
|
||||
<Text size="sm" weight="normal" color="text-gray-500">/season</Text>
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Stack gap={2} mb={4}>
|
||||
{benefits.map((benefit, i) => (
|
||||
<Stack key={i} direction="row" align="center" gap={2}>
|
||||
<Icon icon={CheckCircle2} size={4} color="#10b981" />
|
||||
<Text size="sm" color="text-gray-300">{benefit}</Text>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
{isSelected && available && (
|
||||
<Box style={{ position: 'absolute', top: '1rem', right: '1rem' }}>
|
||||
<Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: '#3b82f6', width: '1rem', height: '1rem', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Icon icon={CheckCircle2} size={3} color="white" />
|
||||
</Surface>
|
||||
</Box>
|
||||
)}
|
||||
</Surface>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,9 @@
|
||||
import Link from 'next/link';
|
||||
import Card from '@/components/ui/Card';
|
||||
import React from 'react';
|
||||
import { Link } from '@/ui/Link';
|
||||
import { Card } from '@/ui/Card';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
|
||||
interface SponsorshipCategoryCardProps {
|
||||
icon: React.ElementType;
|
||||
@@ -10,7 +14,7 @@ interface SponsorshipCategoryCardProps {
|
||||
href: string;
|
||||
}
|
||||
|
||||
export default function SponsorshipCategoryCard({
|
||||
export function SponsorshipCategoryCard({
|
||||
icon: Icon,
|
||||
title,
|
||||
count,
|
||||
@@ -19,24 +23,26 @@ export default function SponsorshipCategoryCard({
|
||||
href
|
||||
}: SponsorshipCategoryCardProps) {
|
||||
return (
|
||||
<Link href={href}>
|
||||
<Card className="p-4 hover:border-primary-blue/50 transition-all duration-300 cursor-pointer group">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-10 h-10 rounded-lg bg-iron-gray flex items-center justify-center group-hover:bg-primary-blue/10 transition-colors`}>
|
||||
<Icon className={`w-5 h-5 ${color}`} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white font-medium">{title}</p>
|
||||
<p className="text-sm text-gray-500">{count} active</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-white font-semibold">{impressions.toLocaleString()}</p>
|
||||
<p className="text-xs text-gray-500">impressions</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Link>
|
||||
<Box>
|
||||
<Link href={href} variant="ghost" style={{ display: 'block' }}>
|
||||
<Card style={{ padding: '1rem', transition: 'all 0.3s', cursor: 'pointer' }}>
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Stack direction="row" align="center" gap={3}>
|
||||
<Box style={{ width: '2.5rem', height: '2.5rem', borderRadius: '0.5rem', backgroundColor: '#262626', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Icon style={{ width: '1.25rem', height: '1.25rem', color }} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text weight="medium" color="text-white" style={{ display: 'block' }}>{title}</Text>
|
||||
<Text size="sm" color="text-gray-500">{count} active</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Box style={{ textAlign: 'right' }}>
|
||||
<Text weight="semibold" color="text-white" style={{ display: 'block' }}>{impressions.toLocaleString()}</Text>
|
||||
<Text size="xs" color="text-gray-500">impressions</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Link>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
import { useAuth } from '@/lib/auth/AuthContext';
|
||||
import React from 'react';
|
||||
|
||||
export function useSponsorMode(): boolean {
|
||||
const { session } = useAuth();
|
||||
const [isSponsor, setIsSponsor] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!session) {
|
||||
setIsSponsor(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Check session.role for sponsor
|
||||
const role = session.role;
|
||||
if (role === 'sponsor') {
|
||||
setIsSponsor(true);
|
||||
return;
|
||||
}
|
||||
|
||||
// Fallback: check email patterns
|
||||
const email = session.email?.toLowerCase() || '';
|
||||
const displayName = session.displayName?.toLowerCase() || '';
|
||||
|
||||
setIsSponsor(email.includes('sponsor') || displayName.includes('sponsor'));
|
||||
}, [session]);
|
||||
|
||||
return isSponsor;
|
||||
}
|
||||
Reference in New Issue
Block a user