46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { ReactNode } from 'react';
|
|
|
|
interface SponsorSlotCardProps {
|
|
title: string;
|
|
status: string;
|
|
statusColor: string;
|
|
benefits: string;
|
|
price?: string;
|
|
action?: ReactNode;
|
|
available: boolean;
|
|
variant: 'main' | 'secondary';
|
|
}
|
|
|
|
export function SponsorSlotCard({
|
|
title,
|
|
status,
|
|
statusColor,
|
|
benefits,
|
|
price,
|
|
action,
|
|
available,
|
|
variant,
|
|
}: SponsorSlotCardProps) {
|
|
const bgClass = available
|
|
? (variant === 'main' ? 'bg-performance-green/10 border-performance-green/30' : 'bg-purple-500/10 border-purple-500/30')
|
|
: 'bg-iron-gray/30 border-charcoal-outline';
|
|
|
|
return (
|
|
<Box p={3} rounded="lg" border={true} className={bgClass}>
|
|
<Box display="flex" alignItems="center" justifyContent="between" mb={1}>
|
|
<Text size="sm" weight="medium" color="text-white">{title}</Text>
|
|
<Text size="xs" className={statusColor}>{status}</Text>
|
|
</Box>
|
|
<Text size="xs" color="text-gray-400" block mb={2}>{benefits}</Text>
|
|
{available && price && (
|
|
<Box display="flex" alignItems="center" justifyContent="between">
|
|
<Text size="lg" weight="bold" color="text-white">{price}</Text>
|
|
{action}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|