47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
import { Stack, Stepper } from '@mantine/core';
|
|
import { useState } from 'react';
|
|
|
|
import { StepCreateAccount } from './step-create-account';
|
|
import { StepDockerImport } from './step-docker-import';
|
|
import { StepDocumentation } from './step-documentation';
|
|
import { StepOnboardingFinished } from './step-onboarding-finished';
|
|
import { StepUpdatePathMappings } from './step-update-path-mappings';
|
|
|
|
export const OnboardingSteps = ({ isUpdate }: { isUpdate: boolean }) => {
|
|
const [currentStep, setCurrentStep] = useState(0);
|
|
const nextStep = () => setCurrentStep((current) => (current < 4 ? current + 1 : current));
|
|
const prevStep = () => setCurrentStep((current) => (current > 0 ? current - 1 : current));
|
|
|
|
return (
|
|
<Stack p="lg">
|
|
<Stepper
|
|
allowNextStepsSelect={false}
|
|
active={currentStep}
|
|
onStepClick={setCurrentStep}
|
|
breakpoint="sm"
|
|
>
|
|
{isUpdate && (
|
|
<Stepper.Step
|
|
label="Update your installation"
|
|
description="Adjust path mappings and variables"
|
|
>
|
|
<StepUpdatePathMappings next={nextStep} />
|
|
</Stepper.Step>
|
|
)}
|
|
<Stepper.Step label="Your account" description="Create an account">
|
|
<StepCreateAccount next={nextStep} previous={prevStep} />
|
|
</Stepper.Step>
|
|
<Stepper.Step label="Docker import" description="Import applications from Docker">
|
|
<StepDockerImport next={nextStep} />
|
|
</Stepper.Step>
|
|
<Stepper.Step label="Documentation" description="Introduction into Homarr">
|
|
<StepDocumentation next={nextStep} />
|
|
</Stepper.Step>
|
|
<Stepper.Completed>
|
|
<StepOnboardingFinished />
|
|
</Stepper.Completed>
|
|
</Stepper>
|
|
</Stack>
|
|
);
|
|
};
|