Marc Mintel
9894c4a841
Some checks failed
CI / lint-typecheck (pull_request) Failing after 13s
CI / tests (pull_request) Has been skipped
CI / contract-tests (pull_request) Has been skipped
CI / e2e-tests (pull_request) Has been skipped
CI / comment-pr (pull_request) Has been skipped
CI / commit-types (pull_request) Has been skipped
57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import { Container } from '@/ui/Container';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Box } from '@/ui/Box';
|
|
|
|
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 minHeight="100vh" bg="rgba(10,10,10,1)" color="white" data-testid="onboarding-wizard">
|
|
{header && (
|
|
<Box borderBottom borderColor="rgba(255,255,255,0.1)" py={4} bg="rgba(20,22,25,1)">
|
|
<Container size="md">
|
|
{header}
|
|
</Container>
|
|
</Box>
|
|
)}
|
|
|
|
<Box flexGrow={1} py={12}>
|
|
<Container size="md">
|
|
<Stack direction="row" gap={12}>
|
|
<Box flexGrow={1}>
|
|
<Stack gap={8}>
|
|
{children}
|
|
</Stack>
|
|
</Box>
|
|
|
|
{sidebar && (
|
|
<Box w="80" display={{ base: 'none', lg: 'block' }}>
|
|
{sidebar}
|
|
</Box>
|
|
)}
|
|
</Stack>
|
|
</Container>
|
|
</Box>
|
|
|
|
{footer && (
|
|
<Box borderTop borderColor="rgba(255,255,255,0.1)" py={6} bg="rgba(20,22,25,1)">
|
|
<Container size="md">
|
|
{footer}
|
|
</Container>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|