142 lines
4.1 KiB
TypeScript
142 lines
4.1 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import styles from "./styles.module.css";
|
|
import Onboarding from "../Onboarding";
|
|
import { useRef, useState } from "react";
|
|
import TextWithFinger from "../TextWithFinger";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { actions, selectors } from "@/store";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export interface INavbarHomeItems {
|
|
title: string;
|
|
paths: string[];
|
|
image: string;
|
|
path: string;
|
|
active?: boolean;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
interface INavbarHomeProps {
|
|
items: INavbarHomeItems[];
|
|
}
|
|
|
|
function NavbarFooter({ items }: INavbarHomeProps): JSX.Element {
|
|
const dispatch = useDispatch();
|
|
const { t } = useTranslation();
|
|
const onboardingConfigNavbarFooter = useSelector(
|
|
selectors.selectOnboardingNavbarFooter
|
|
);
|
|
|
|
const [isShowOnboardingNavbarFooter, setIsShowOnboardingNavbarFooter] =
|
|
useState(!onboardingConfigNavbarFooter.isShown);
|
|
const [selectedOnboarding, setSelectedOnboarding] = useState(3);
|
|
|
|
const buttonsRef = useRef([] as HTMLDivElement[]);
|
|
|
|
const setShownOnboarding = () => {
|
|
setIsShowOnboardingNavbarFooter(false);
|
|
dispatch(
|
|
actions.onboardingConfig.update({
|
|
navbarFooter: {
|
|
isShown: true,
|
|
},
|
|
})
|
|
);
|
|
};
|
|
|
|
const onboardingsSettings = [
|
|
{
|
|
text: t("au.web_onbording.breathing"),
|
|
onClick: () => setSelectedOnboarding(2),
|
|
classNameText: `${styles["breathing-onboarding__text"]} ${styles.onboarding}`,
|
|
},
|
|
{
|
|
text: t("au.web_onbording.onboarding_2"),
|
|
onClick: () => setSelectedOnboarding(2),
|
|
},
|
|
{
|
|
text: t("au.web_onbording.compatibility"),
|
|
onClick: () => setShownOnboarding(),
|
|
classNameText: `${styles["compatibility-onboarding__text"]} ${styles.onboarding}`,
|
|
},
|
|
{
|
|
text: t("au.web_onbording.moon"),
|
|
onClick: () => setSelectedOnboarding(0),
|
|
classNameText: `${styles["moon-onboarding__text"]} ${styles.onboarding}`,
|
|
},
|
|
];
|
|
|
|
const handleClick = (item: INavbarHomeItems) => {
|
|
onboardingsSettings[selectedOnboarding].onClick();
|
|
if (item.onClick) {
|
|
item.onClick();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={`${styles["container"]}`}>
|
|
{items.map((item, index) => (
|
|
<div
|
|
className={`${styles["navbar-item"]} ${
|
|
item.active ? styles["navbar-item--active"] : ""
|
|
}`}
|
|
key={index}
|
|
ref={(el) => (buttonsRef.current[index] = el as HTMLDivElement)}
|
|
>
|
|
{isShowOnboardingNavbarFooter && (
|
|
<Onboarding
|
|
targetRef={buttonsRef.current[index]}
|
|
isShow={index === selectedOnboarding}
|
|
>
|
|
<TextWithFinger
|
|
text={onboardingsSettings[index].text}
|
|
crossClickHandler={() => onboardingsSettings[index].onClick()}
|
|
classNameText={onboardingsSettings[index].classNameText}
|
|
/>
|
|
</Onboarding>
|
|
)}
|
|
<Link
|
|
className={styles["navbar-item__link"]}
|
|
to={item.path}
|
|
onClick={() => {
|
|
handleClick(item);
|
|
}}
|
|
>
|
|
<div
|
|
className={styles["navbar-item__image-container"]}
|
|
style={{
|
|
backgroundColor: item.paths.includes(location.pathname)
|
|
? "#ff2c57"
|
|
: "#fff",
|
|
mask: `url('/navbar-icons/${item.image}')`,
|
|
WebkitMask: `url('/navbar-icons/${item.image}')`,
|
|
WebkitMaskSize: "contain",
|
|
WebkitMaskRepeat: "no-repeat",
|
|
WebkitMaskPosition: "center",
|
|
}}
|
|
>
|
|
{/* <img
|
|
className={styles["navbar-item__image"]}
|
|
src={`./navbar-icons/${item.image}`}
|
|
style={{ }}
|
|
alt={item.title}
|
|
/> */}
|
|
</div>
|
|
<p
|
|
style={{
|
|
color: item.paths.includes(location.pathname)
|
|
? "#ff2c57"
|
|
: "#fff",
|
|
}}
|
|
>
|
|
{item.title}
|
|
</p>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default NavbarFooter;
|