78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
import styles from "./styles.module.css";
|
|
import Title from "@/components/Title";
|
|
import { Gender, genders } from "@/data";
|
|
import routes from "@/routes";
|
|
import { actions } from "@/store";
|
|
import { useEffect } from "react";
|
|
import { useDispatch } from "react-redux";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
|
|
function GenderPage(): JSX.Element {
|
|
const dispatch = useDispatch();
|
|
const navigate = useNavigate();
|
|
const { targetId } = useParams();
|
|
const pathName = window.location.pathname;
|
|
|
|
useEffect(() => {
|
|
const isShowTryApp = targetId === "i";
|
|
dispatch(actions.userConfig.addIsShowTryApp(isShowTryApp));
|
|
}, [dispatch, targetId]);
|
|
|
|
const selectGender = (gender: Gender) => {
|
|
dispatch(actions.questionnaire.update({ gender: gender.id }));
|
|
if (pathName === "/epe/gender") {
|
|
return navigate(routes.client.epeBirthdate());
|
|
}
|
|
navigate(`/questionnaire/profile/flowChoice`);
|
|
};
|
|
|
|
const getButtonBGColor = (gender: Gender): string => {
|
|
const { colorAssociation } = gender;
|
|
if (Array.isArray(colorAssociation)) {
|
|
return `linear-gradient(125.02deg, ${colorAssociation.join(", ")})`;
|
|
}
|
|
if (typeof colorAssociation === "string") {
|
|
return colorAssociation;
|
|
}
|
|
return "#f5f5f5";
|
|
};
|
|
|
|
return (
|
|
<section className={`${styles.page} page`}>
|
|
<Title variant="h2" className={styles.title}>
|
|
Understand Yourself and Improve Relationships With Astrology
|
|
</Title>
|
|
<span className={styles.description}>1-Minute Personal Assessment</span>
|
|
<Title variant="h3" className={styles["title-select"]}>
|
|
Select your gender:
|
|
</Title>
|
|
<div className={styles["genders-container"]}>
|
|
{genders.map((gender, index) => (
|
|
<div
|
|
className={styles["gender"]}
|
|
key={index}
|
|
onClick={() => {
|
|
selectGender(gender);
|
|
}}
|
|
>
|
|
<img
|
|
src={gender.img}
|
|
className={styles["gender__img"]}
|
|
alt={gender.id}
|
|
/>
|
|
<button
|
|
className={styles["gender__button"]}
|
|
style={{ background: getButtonBGColor(gender) }}
|
|
>
|
|
<span>{gender.name}</span>
|
|
<div className={styles["button__arrow"]}></div>
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default GenderPage;
|