External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(onboarding): recalculate progress bar from full STEP_ORDER position

Browse Source
This commit is contained in:
Théo LAGACHE
2026-06-19 11:35:55 +02:00
parent 57e78e0929
commit 8f413d0e1d
1 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/onboarding/onboarding-stepper.tsx
+20 -11
View File
@@ -2,19 +2,28 @@
import { useOnboarding } from "@onboardjs/react";
import { Progress } from "@/components/ui/progress";
import { STEP_ORDER } from "@/features/onboarding/constants/steps";
export const OnboardingStepper = () => {
const { state } = useOnboarding();
const { state } = useOnboarding();
if (!state) return null;
if (!state) return null;
return (
<div className="flex flex-col gap-2 w-full">
<div className="flex justify-between text-xs text-muted-foreground">
<span>Step {state.currentStepNumber} of {state.totalSteps}</span>
<span>{Math.round(state.progressPercentage)}%</span>
</div>
<Progress value={state.progressPercentage} />
</div>
);
const currentId = String(state.currentStep?.id ?? "");
const currentIndex = Math.max(0, STEP_ORDER.indexOf(currentId));
const totalSteps = STEP_ORDER.length;
const stepNumber = currentIndex + 1;
const progress = Math.round((currentIndex / (totalSteps - 1)) * 100);
return (
<div className="flex flex-col gap-2 w-full">
<div className="flex justify-between text-xs text-muted-foreground">
<span>
Step {stepNumber} of {totalSteps}
</span>
<span>{progress}%</span>
</div>
<Progress value={progress} />
</div>
);
};