57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
|
|
|
|
import { Button } from '@/ui/Button';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface RenewalItemProps {
|
|
name: string;
|
|
renewDateLabel: string;
|
|
priceLabel: string;
|
|
icon: LucideIcon;
|
|
onRenew?: () => void;
|
|
}
|
|
|
|
export function RenewalItem({
|
|
name,
|
|
renewDateLabel,
|
|
priceLabel,
|
|
icon,
|
|
onRenew,
|
|
}: RenewalItemProps) {
|
|
return (
|
|
<Stack
|
|
direction="row"
|
|
align="center"
|
|
justify="between"
|
|
p={3}
|
|
rounded="lg"
|
|
bg="bg-warning-amber/10"
|
|
border
|
|
borderColor="border-warning-amber/30"
|
|
>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Icon icon={icon} size={4} color="rgb(245, 158, 11)" />
|
|
<Stack>
|
|
<Text size="sm" color="text-white" block>{name}</Text>
|
|
<Text size="xs" color="text-gray-400">Renews {renewDateLabel}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
<Stack textAlign="right">
|
|
<Text size="sm" weight="semibold" color="text-white" block>{priceLabel}</Text>
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
mt={1}
|
|
onClick={onRenew}
|
|
style={{ minHeight: 0, padding: '0.25rem 0.5rem', fontSize: '0.75rem' }}
|
|
>
|
|
Renew
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|