31 lines
863 B
TypeScript
31 lines
863 B
TypeScript
import React from 'react';
|
|
import { Calendar } from 'lucide-react';
|
|
import { Box } from './Box';
|
|
import { Stack } from './Stack';
|
|
import { Text } from './Text';
|
|
import { Icon } from './Icon';
|
|
|
|
interface DateHeaderProps {
|
|
label: string;
|
|
count?: number;
|
|
countLabel?: string;
|
|
}
|
|
|
|
export function DateHeader({ label, count, countLabel = 'races' }: DateHeaderProps) {
|
|
return (
|
|
<Stack direction="row" align="center" gap={3} px={2}>
|
|
<Box p={2} bg="bg-primary-blue/10" rounded="lg">
|
|
<Icon icon={Calendar} size={4} color="rgb(59, 130, 246)" />
|
|
</Box>
|
|
<Text weight="semibold" size="sm" color="text-white">
|
|
{label}
|
|
</Text>
|
|
{count !== undefined && (
|
|
<Text size="xs" color="text-gray-500">
|
|
{count} {count === 1 ? countLabel.replace(/s$/, '') : countLabel}
|
|
</Text>
|
|
)}
|
|
</Stack>
|
|
);
|
|
}
|