46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
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: {
|
|
id: string;
|
|
type: 'league' | 'team' | 'driver' | 'race' | 'platform';
|
|
name: string;
|
|
formattedRenewDate: string;
|
|
formattedPrice: string;
|
|
};
|
|
}
|
|
|
|
export function RenewalAlert({ renewal }: RenewalAlertProps) {
|
|
const typeIcons: Record<string, LucideIcon> = {
|
|
league: Trophy,
|
|
team: Users,
|
|
driver: Car,
|
|
race: Flag,
|
|
platform: Megaphone,
|
|
};
|
|
const Icon = typeIcons[renewal.type] || Trophy;
|
|
|
|
return (
|
|
<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>
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
}
|