57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import { Box } from '@/ui/Box';
|
|
import { Container } from '@/ui/Container';
|
|
import { Stack } from '@/ui/Stack';
|
|
|
|
interface OnboardingShellProps {
|
|
children: React.ReactNode;
|
|
header?: React.ReactNode;
|
|
footer?: React.ReactNode;
|
|
sidebar?: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* OnboardingShell
|
|
*
|
|
* Semantic layout wrapper for the onboarding flow.
|
|
* Follows "Precision Racing Minimal" theme with dark surfaces and clean structure.
|
|
*/
|
|
export function OnboardingShell({ children, header, footer, sidebar }: OnboardingShellProps) {
|
|
return (
|
|
<Box minH="screen" bg="bg-near-black" color="text-white" display="flex" flexDirection="column">
|
|
{header && (
|
|
<Box borderB borderColor="border-charcoal-outline" py={4} bg="bg-deep-charcoal">
|
|
<Container size="md">
|
|
{header}
|
|
</Container>
|
|
</Box>
|
|
)}
|
|
|
|
<Box flex={1} display="flex" py={12}>
|
|
<Container size="md">
|
|
<Box display="flex" gap={12}>
|
|
<Box flex={1}>
|
|
<Stack gap={8}>
|
|
{children}
|
|
</Stack>
|
|
</Box>
|
|
|
|
{sidebar && (
|
|
<Box w="80" display={{ base: 'none', lg: 'block' }}>
|
|
{sidebar}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
|
|
{footer && (
|
|
<Box borderT borderColor="border-charcoal-outline" py={6} bg="bg-deep-charcoal">
|
|
<Container size="md">
|
|
{footer}
|
|
</Container>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|