100 lines
2.8 KiB
TypeScript
100 lines
2.8 KiB
TypeScript
|
|
|
|
import { CheckCircle2, LucideIcon } from 'lucide-react';
|
|
import { Badge } from './Badge';
|
|
import { Box } from './Box';
|
|
import { Heading } from './Heading';
|
|
import { Icon } from './Icon';
|
|
import { Stack } from './Stack';
|
|
import { Surface } from './Surface';
|
|
import { Text } from './Text';
|
|
|
|
interface SponsorTierCardProps {
|
|
type: 'main' | 'secondary';
|
|
available: boolean;
|
|
availableCount?: number;
|
|
totalCount?: number;
|
|
price: number;
|
|
benefits: string[];
|
|
isSelected: boolean;
|
|
onClick: () => void;
|
|
icon: LucideIcon;
|
|
iconColor: string;
|
|
}
|
|
|
|
export function SponsorTierCard({
|
|
type,
|
|
available,
|
|
availableCount,
|
|
totalCount,
|
|
price,
|
|
benefits,
|
|
isSelected,
|
|
onClick,
|
|
icon,
|
|
iconColor,
|
|
}: SponsorTierCardProps) {
|
|
const isMain = type === 'main';
|
|
|
|
return (
|
|
<Surface
|
|
variant="muted"
|
|
rounded="xl"
|
|
border={true}
|
|
padding={5}
|
|
className={`transition-all duration-200 ${available ? 'cursor-pointer' : 'opacity-60 cursor-default'} ${isSelected ? 'border-primary-blue ring-2 ring-primary-blue/20' : 'border-charcoal-outline'}`}
|
|
onClick={available ? onClick : undefined}
|
|
position="relative"
|
|
>
|
|
<Stack direction="row" align="start" justify="between" mb={4}>
|
|
<Box>
|
|
<Stack direction="row" align="center" gap={2} mb={1}>
|
|
<Icon icon={icon} size={5} className={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="text-performance-green" />
|
|
<Text size="sm" color="text-gray-300">{benefit}</Text>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
|
|
{isSelected && available && (
|
|
<Box position="absolute" top="4" right="4">
|
|
<Box
|
|
width="4"
|
|
height="4"
|
|
rounded="full"
|
|
bg="bg-primary-blue"
|
|
display="flex"
|
|
center
|
|
>
|
|
<Icon icon={CheckCircle2} size={3} color="text-white" />
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
</Surface>
|
|
);
|
|
}
|