import { Tutorial } from "./TutorialModels";
import { TutorialStep } from "./TutorialStepModels";
export type TopNavProps = {
parent: Tutorial;
currentStep?: TutorialStep | null;
};
type Paging = {
previous?: TutorialStep | null;
next?: TutorialStep | null;
current: TutorialStep | null;
currentIndex: number;
};
function getPagingElements(
parent: Tutorial,
currentStep: TutorialStep | null
): Paging {
const siblings = parent.tutorialSteps;
const currentSlugIndex = siblings.findIndex((s) => s == currentStep);
const previous = currentSlugIndex > 0 ? siblings[currentSlugIndex - 1] : null;
const next =
currentSlugIndex < siblings.length ? siblings[currentSlugIndex + 1] : null;
return {
previous,
next,
current: currentStep,
currentIndex: currentSlugIndex,
};
}
export const TopNav = ({ parent }: TopNavProps): JSX.Element => {
return (
);
};
export const BottomNav = ({
parent,
currentStep = null,
}: TopNavProps): JSX.Element => {
const { previous, next } = getPagingElements(parent, currentStep);
return (
);
};