62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { useSelector } from "react-redux";
|
|
import styles from "./styles.module.css";
|
|
import { selectors } from "@/store";
|
|
import { getZodiacSignByDate } from "@/services/zodiac-sign";
|
|
import { useNavigate } from "react-router-dom";
|
|
import routes from "@/routes";
|
|
import { IZodicSignsInfo, zodicSignsInfo } from "@/data";
|
|
import Title from "@/components/Title";
|
|
import MainButton from "@/components/MainButton";
|
|
|
|
function SingleZodiacInfoPage() {
|
|
const navigate = useNavigate();
|
|
const birthdate = useSelector(selectors.selectQuestionnaire).birthdate;
|
|
const gender = useSelector(selectors.selectQuestionnaire).gender;
|
|
const zodiac = getZodiacSignByDate(birthdate);
|
|
const zodiacInfo = zodicSignsInfo[gender as keyof IZodicSignsInfo].find(
|
|
(sign) => sign.name === zodiac
|
|
);
|
|
|
|
const image = zodiacInfo?.img;
|
|
|
|
const handleNext = () => {
|
|
navigate(`${routes.client.questionnaire()}/profile/isBirthTime`);
|
|
};
|
|
|
|
const handleBack = () => {
|
|
navigate(-1);
|
|
};
|
|
|
|
return (
|
|
<section className={`${styles.page} page`}>
|
|
<img
|
|
className={styles.image}
|
|
src={image}
|
|
alt="The image of the zodiac sign"
|
|
/>
|
|
<div className={styles["zodiac-info-container"]}>
|
|
<Title variant="h2" className={styles.title}>
|
|
{zodiac} {gender}s
|
|
</Title>
|
|
<p className={styles.description}>{zodiacInfo?.description}</p>
|
|
</div>
|
|
<div className={styles["buttons-container"]}>
|
|
<MainButton
|
|
className={`${styles.button} ${styles["back-button"]}`}
|
|
onClick={handleBack}
|
|
>
|
|
Back
|
|
</MainButton>
|
|
<MainButton
|
|
className={`${styles.button} ${styles["next-button"]}`}
|
|
onClick={handleNext}
|
|
>
|
|
Next
|
|
</MainButton>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default SingleZodiacInfoPage;
|