57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { ReactNode } from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Container } from '@/ui/Container';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface RacesAllLayoutProps {
|
|
children: ReactNode;
|
|
header: ReactNode;
|
|
stats: ReactNode;
|
|
pagination: ReactNode;
|
|
}
|
|
|
|
export function RacesAllLayout({ children, header, stats, pagination }: RacesAllLayoutProps) {
|
|
return (
|
|
<Box as="main" minHeight="screen" bg="bg-base-black" py={8}>
|
|
<Container size="lg">
|
|
<Stack gap={8}>
|
|
{header}
|
|
{stats}
|
|
{children}
|
|
{pagination}
|
|
</Stack>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export function RacesAllStats({ count, onFilterClick }: { count: number, onFilterClick: () => void }) {
|
|
return (
|
|
<Box display="flex" justifyContent="between" alignItems="center">
|
|
<Text size="sm" color="text-gray-400">
|
|
Showing <Text as="span" color="text-white" weight="bold">{count}</Text> races
|
|
</Text>
|
|
<Box
|
|
as="button"
|
|
onClick={onFilterClick}
|
|
px={4}
|
|
py={2}
|
|
bg="bg-surface-charcoal"
|
|
border
|
|
borderColor="border-outline-steel"
|
|
fontSize="10px"
|
|
weight="bold"
|
|
letterSpacing="wider"
|
|
hoverBorderColor="border-primary-accent"
|
|
transition
|
|
className="uppercase"
|
|
>
|
|
Filters
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|