56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { LucideIcon } from 'lucide-react';
|
|
import { Link } from './Link';
|
|
import { Card } from './Card';
|
|
import { Box } from './Box';
|
|
import { Stack } from './Stack';
|
|
import { Text } from './Text';
|
|
import { Icon } from './Icon';
|
|
|
|
interface SponsorshipCategoryCardProps {
|
|
icon: LucideIcon;
|
|
title: string;
|
|
count: number;
|
|
impressions: number;
|
|
color: string;
|
|
href: string;
|
|
}
|
|
|
|
export function SponsorshipCategoryCard({
|
|
icon,
|
|
title,
|
|
count,
|
|
impressions,
|
|
color,
|
|
href
|
|
}: SponsorshipCategoryCardProps) {
|
|
return (
|
|
<Link href={href} variant="ghost" block>
|
|
<Card p={4} className="hover:border-charcoal-outline/60 transition-all cursor-pointer">
|
|
<Stack direction="row" align="center" justify="between">
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Box
|
|
width="10"
|
|
height="10"
|
|
rounded="lg"
|
|
bg="bg-charcoal-outline"
|
|
display="flex"
|
|
center
|
|
>
|
|
<Icon icon={icon} size={5} className={color} />
|
|
</Box>
|
|
<Box>
|
|
<Text weight="medium" color="text-white" block>{title}</Text>
|
|
<Text size="sm" color="text-gray-500">{count} active</Text>
|
|
</Box>
|
|
</Stack>
|
|
<Box textAlign="right">
|
|
<Text weight="semibold" color="text-white" block>{impressions.toLocaleString()}</Text>
|
|
<Text size="xs" color="text-gray-500">impressions</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Card>
|
|
</Link>
|
|
);
|
|
}
|