70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { DollarSign } from 'lucide-react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Surface } from '@/ui/Surface';
|
|
|
|
interface SponsorshipSlot {
|
|
id: string;
|
|
name: string;
|
|
description: string;
|
|
price: number;
|
|
currency: string;
|
|
isAvailable: boolean;
|
|
sponsoredBy?: {
|
|
name: string;
|
|
};
|
|
}
|
|
|
|
interface SponsorshipSlotCardProps {
|
|
slot: SponsorshipSlot;
|
|
}
|
|
|
|
export function SponsorshipSlotCard({ slot }: SponsorshipSlotCardProps) {
|
|
return (
|
|
<Surface
|
|
variant="muted"
|
|
rounded="lg"
|
|
border
|
|
padding={4}
|
|
// eslint-disable-next-line gridpilot-rules/component-classification
|
|
style={{
|
|
backgroundColor: slot.isAvailable ? 'rgba(16, 185, 129, 0.05)' : 'rgba(38, 38, 38, 0.3)',
|
|
borderColor: slot.isAvailable ? '#10b981' : '#262626'
|
|
}}
|
|
>
|
|
<Stack gap={3}>
|
|
<Stack direction="row" align="start" justify="between">
|
|
<Heading level={4}>{slot.name}</Heading>
|
|
<Badge variant={slot.isAvailable ? 'success' : 'default'}>
|
|
{slot.isAvailable ? 'Available' : 'Taken'}
|
|
</Badge>
|
|
</Stack>
|
|
|
|
<Text size="sm" color="text-gray-300" block>{slot.description}</Text>
|
|
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={DollarSign} size={4} color="#9ca3af" />
|
|
<Text weight="semibold" color="text-white">
|
|
{slot.price} {slot.currency}
|
|
</Text>
|
|
</Stack>
|
|
|
|
{!slot.isAvailable && slot.sponsoredBy && (
|
|
// eslint-disable-next-line gridpilot-rules/component-classification
|
|
<Box pt={3} style={{ borderTop: '1px solid #262626' }}>
|
|
<Text size="xs" color="text-gray-400" block mb={1}>Sponsored by</Text>
|
|
<Text size="sm" weight="medium" color="text-white">{slot.sponsoredBy.name}</Text>
|
|
</Box>
|
|
)}
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|