55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
/**
|
|
* @component Onboarding
|
|
* @description Main component that orchestrates the onboarding flow
|
|
*
|
|
* @see https://www.figma.com/design/cfMOy1RJasIu3QyzAMBFxB/Laconic?node-id=571-3500&m=dev
|
|
*/
|
|
|
|
'use client'
|
|
|
|
import { ConfigureStep } from '@/components/onboarding/configure-step'
|
|
import { ConnectStep } from '@/components/onboarding/connect-step'
|
|
import { DeployStep } from '@/components/onboarding/deploy-step'
|
|
import { useOnboarding } from '@/components/onboarding/useOnboarding'
|
|
import { ScrollArea } from '@workspace/ui/components/scroll-area'
|
|
import { SidebarNav } from './sidebar'
|
|
|
|
/**
|
|
* Main onboarding page component
|
|
* Orchestrates the entire onboarding flow and manages step transitions
|
|
*
|
|
* Component Hierarchy:
|
|
* - OnboardingContainer
|
|
* - SidebarNav (step progress)
|
|
* - Main content
|
|
* - StepHeader (current step info)
|
|
* - Step content (ConnectStep | ConfigureStep | DeployStep)
|
|
* - StepNavigation (previous/next controls)
|
|
*
|
|
* @returns {JSX.Element} Complete onboarding interface
|
|
*/
|
|
export default function Onboarding() {
|
|
const { currentStep } = useOnboarding()
|
|
|
|
return (
|
|
// <OnboardingContainer data-oid="yb4gz7q">
|
|
<div className="flex w-full flex-row">
|
|
<SidebarNav currentStep={currentStep} />
|
|
<ScrollArea className="flex-1 mt-6 mb-6 w-full">
|
|
{currentStep === 'connect' && <ConnectStep />}
|
|
{currentStep === 'configure' && <ConfigureStep />}
|
|
{currentStep === 'deploy' && <DeployStep />}
|
|
</ScrollArea>
|
|
|
|
{/* <StepNavigation
|
|
currentStep={currentStep}
|
|
onPrevious={previousStep}
|
|
onNext={nextStep}
|
|
nextLabel={currentStep === "deploy" ? "Deploy" : "Next"}
|
|
data-oid="jjbfqa3"
|
|
/> */}
|
|
</div>
|
|
// </OnboardingContainer>
|
|
)
|
|
}
|