53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import { useSchemeColorByElement } from "@/hooks/useSchemeColorByElement";
|
|
import { useRef } from "react";
|
|
import { Outlet, useLocation } from "react-router-dom";
|
|
import routes from "@/routes";
|
|
import StepperBar from "@/components/PalmistryV1/components/StepperBar";
|
|
import styles from "./styles.module.scss";
|
|
|
|
const stepperRoutes = [
|
|
routes.client.palmistryV1Birthdate(),
|
|
routes.client.palmistryV1PalmsInformation(),
|
|
routes.client.palmistryV1WhatAspects(),
|
|
routes.client.palmistryV1RelationshipStatus(),
|
|
routes.client.palmistryV1ElementResonates(),
|
|
routes.client.palmistryV1FavoriteColor(),
|
|
routes.client.palmistryV1HeadOrHeart(),
|
|
routes.client.palmistryV1HeadOrHeartResult(),
|
|
routes.client.palmistryV1RelateFollowing(),
|
|
routes.client.palmistryV1Email(),
|
|
];
|
|
|
|
function StepperLayoutPalmistryV1() {
|
|
const location = useLocation();
|
|
const mainRef = useRef<HTMLDivElement>(null);
|
|
useSchemeColorByElement(mainRef.current, "section.page, .page, section", [
|
|
location,
|
|
]);
|
|
|
|
const getCurrentStep = () => {
|
|
let index = 0;
|
|
for (const route of stepperRoutes) {
|
|
if (location.pathname.includes(route)) {
|
|
return index + 1;
|
|
}
|
|
index++;
|
|
}
|
|
return 0;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<StepperBar
|
|
length={stepperRoutes.length}
|
|
currentStep={getCurrentStep()}
|
|
color="#B2BCFF"
|
|
className={styles["stepper-bar"]}
|
|
/>
|
|
<Outlet />
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default StepperLayoutPalmistryV1;
|