49 lines
1.4 KiB
TypeScript
49 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 { Grid } from '@/ui/Grid';
|
|
import { GridItem } from '@/ui/GridItem';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface RacesLayoutProps {
|
|
children: ReactNode;
|
|
header: ReactNode;
|
|
banner?: ReactNode;
|
|
sidebar: ReactNode;
|
|
}
|
|
|
|
export function RacesLayout({ children, header, banner, sidebar }: RacesLayoutProps) {
|
|
return (
|
|
<Box as="main" minHeight="screen" bg="bg-base-black" py={8}>
|
|
<Container size="lg">
|
|
<Stack gap={8}>
|
|
{header}
|
|
{banner}
|
|
<Grid cols={12} gap={6}>
|
|
<GridItem colSpan={12} lgSpan={8}>
|
|
{children}
|
|
</GridItem>
|
|
<GridItem colSpan={12} lgSpan={4}>
|
|
{sidebar}
|
|
</GridItem>
|
|
</Grid>
|
|
</Stack>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export function RaceScheduleSection({ children, title }: { children: ReactNode, title: string }) {
|
|
return (
|
|
<Box as="section" bg="bg-surface-charcoal" border borderColor="border-outline-steel" overflow="hidden">
|
|
<Box p={4} borderBottom borderColor="border-outline-steel" bg="bg-base-black" bgOpacity={0.2}>
|
|
<Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="widest">{title}</Text>
|
|
</Box>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|