97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
'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>
|
|
);
|
|
}
|