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
45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import { Panel } from '@/ui/Panel';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface OnboardingStepPanelProps {
|
|
title: string;
|
|
description?: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* OnboardingStepPanel
|
|
*
|
|
* A semantic container for a single onboarding step.
|
|
* Provides a consistent header and surface.
|
|
*/
|
|
export function OnboardingStepPanel({ title, description, children }: OnboardingStepPanelProps) {
|
|
const testId = title.toLowerCase().includes('personal') ? 'step-1-personal-info' : 'step-2-avatar';
|
|
return (
|
|
<Stack gap={6} data-testid={testId}>
|
|
<Stack gap={1}>
|
|
<Text as="h2" size="2xl" weight="bold" color="text-white" letterSpacing="tight">
|
|
{title}
|
|
</Text>
|
|
{description && (
|
|
<Text size="sm" color="text-gray-400">
|
|
{description}
|
|
</Text>
|
|
)}
|
|
</Stack>
|
|
|
|
<Panel
|
|
variant="dark"
|
|
rounded="xl"
|
|
border
|
|
padding={8}
|
|
borderColor="border-charcoal-outline"
|
|
bg="bg-deep-charcoal/50"
|
|
>
|
|
{children}
|
|
</Panel>
|
|
</Stack>
|
|
);
|
|
}
|