oiupoyt/OneLauncher-Cracked
1
1
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity

feat: cleaner stepper

Browse source
This commit is contained in:
Szedann 2025-10-04 16:50:35 +02:00
parent 4e57d1f66f
commit aca92e4910
2 changed files with 26 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
apps/oneclient/frontend/src/components/Stepper.tsx
View file

@ -3,16 +3,17 @@ import { useMatchRoute } from '@tanstack/react-router';
interface VerticalStepperProps {
steps: Array<OnboardingStep>;
currentLinearIndex: number;
linearSteps: Array<Omit<OnboardingStep, 'subSteps'>>;
};
export function Stepper({ steps, linearSteps }: VerticalStepperProps) {
const matchRoute = useMatchRoute();
export function Stepper({ steps, linearSteps, currentLinearIndex }: VerticalStepperProps) {
// const matchRoute = useMatchRoute();
const currentLinearIndex = linearSteps.findIndex(step =>
matchRoute({ to: step.path }));
// const currentLinearIndex = linearSteps.findIndex(step =>
// matchRoute({ to: step.path }));
const progressHeight = currentLinearIndex >= 0 ? `${(currentLinearIndex / (linearSteps.length - 1)) * 100}%` : '0%';
const progressHeight = currentLinearIndex >= 0 ? `${Math.min((currentLinearIndex + 0.5) / (linearSteps.length - 1), 1) * 100}%` : '0%';
// const nextStep = () => {
// if (currentStep < steps.length - 1)
@ -50,15 +51,17 @@ export function Stepper({ steps, linearSteps }: VerticalStepperProps) {
// onClick={() => goToStep(index)}
>
<div className="ml-8">
<span className={`
<span
className="
transition-all duration-300 font-medium
${index === currentLinearIndex
? 'text-white text-lg'
: index < currentLinearIndex
? ' text-base'
: 'text-gray-400 text-base'
}
`}
text-gray-400
text-base
data-active:text-white
data-active:text-lg
data-complete:text-base
"
data-active={index === currentLinearIndex || null}
data-complete={index < currentLinearIndex || null}
>
{step.title}
</span>

18
apps/oneclient/frontend/src/routes/onboarding/route.tsx
View file

@ -84,23 +84,25 @@ const LINEAR_ONBOARDING_STEPS = getLinearSteps(ONBOARDING_STEPS);
function RouteComponent() {
return (
<LoaderSuspense spinner={{ size: 'large' }}>
<AppShell>
<div className="h-full w-full">
// <LoaderSuspense spinner={{ size: 'large' }}>
<AppShell>
<div className="h-full w-full">
<LoaderSuspense spinner={{ size: 'large' }}>
<Navbar />
<Outlet />
<OnboardingNavigation />
</div>
</AppShell>
</LoaderSuspense>
</LoaderSuspense>
</div>
</AppShell>
// </LoaderSuspense>
);
}
function AppShell({
children,
}: PropsWithChildren) {
const { isFirstStep } = Route.useLoaderData();
const { isFirstStep, currentStepIndex } = Route.useLoaderData();
return (
<div className="flex flex-col h-full w-full">
@ -115,7 +117,7 @@ function AppShell({
</div>
<nav className="flex-1 p-4">
<Stepper linearSteps={LINEAR_ONBOARDING_STEPS} steps={ONBOARDING_STEPS} />
<Stepper currentLinearIndex={currentStepIndex} linearSteps={LINEAR_ONBOARDING_STEPS} steps={ONBOARDING_STEPS} />
</nav>
<div className="p-4 text-xs text-fg-secondary">