52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import { DollarSign } from 'lucide-react';
|
|
import { Badge } from './Badge';
|
|
import { Box } from './Box';
|
|
import { Card } from './Card';
|
|
import { Heading } from './Heading';
|
|
import { Icon } from './Icon';
|
|
import { Text } from './Text';
|
|
|
|
export interface SponsorshipCardProps {
|
|
name: string;
|
|
description: string;
|
|
price: string;
|
|
isAvailable: boolean;
|
|
sponsoredBy?: string;
|
|
}
|
|
|
|
export const SponsorshipCard = ({
|
|
name,
|
|
description,
|
|
price,
|
|
isAvailable,
|
|
sponsoredBy
|
|
}: SponsorshipCardProps) => {
|
|
return (
|
|
<Card
|
|
variant={isAvailable ? 'default' : 'dark'}
|
|
style={isAvailable ? { border: '1px solid var(--ui-color-intent-success)' } : {}}
|
|
>
|
|
<Box display="flex" alignItems="start" justifyContent="between" marginBottom={4}>
|
|
<Heading level={4}>{name}</Heading>
|
|
<Badge variant={isAvailable ? 'success' : 'default'}>
|
|
{isAvailable ? 'Available' : 'Taken'}
|
|
</Badge>
|
|
</Box>
|
|
|
|
<Text size="sm" variant="med" block marginBottom={4}>{description}</Text>
|
|
|
|
<Box display="flex" alignItems="center" gap={2} marginBottom={sponsoredBy ? 4 : 0}>
|
|
<Icon icon={DollarSign} size={4} intent="low" />
|
|
<Text weight="bold" variant="high">{price}</Text>
|
|
</Box>
|
|
|
|
{sponsoredBy && (
|
|
<Box paddingTop={3} style={{ borderTop: '1px solid var(--ui-color-border-muted)' }}>
|
|
<Text size="xs" variant="low" block marginBottom={1}>Sponsored by</Text>
|
|
<Text size="sm" weight="medium" variant="high">{sponsoredBy}</Text>
|
|
</Box>
|
|
)}
|
|
</Card>
|
|
);
|
|
};
|