63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
import Title from "@/components/Title";
|
||
import styles from "./styles.module.css";
|
||
import MainButton from "@/components/MainButton";
|
||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||
import routes from "@/routes";
|
||
|
||
function NoBirthtimePage() {
|
||
const [searchParams] = useSearchParams();
|
||
const affiliation = searchParams.get("affiliation") || "self";
|
||
const navigate = useNavigate();
|
||
|
||
const handleNext = () => {
|
||
if (affiliation === "partner") {
|
||
navigate(
|
||
`${routes.client.questionnaire()}/partnerProfile/partnerBirthPlace`
|
||
);
|
||
}
|
||
if (affiliation === "self") {
|
||
navigate(`${routes.client.questionnaire()}/profile/birthPlace`);
|
||
}
|
||
};
|
||
|
||
const handleBack = () => {
|
||
navigate(-1);
|
||
};
|
||
|
||
return (
|
||
<section className={`${styles.page} page`}>
|
||
<img src="/starry-clock.svg" alt="The clock" />
|
||
<div>
|
||
<Title variant="h1" className={styles.title}>
|
||
No problem! You can still find plenty of great insights without
|
||
knowing
|
||
{affiliation === "self" && " your exact birth time."}
|
||
{affiliation === "partner" &&
|
||
" the exact birth time of your partner."}
|
||
</Title>
|
||
<p className={styles.text}>
|
||
Tip: If you find out later, you can adjust this in your
|
||
{affiliation === "self" && " profile settings."}
|
||
{affiliation === "partner" && " partner’s profile."}
|
||
</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 NoBirthtimePage;
|