45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import Button from "../button/button";
|
||
import useSteps, { GenderChoice } from "../../../hooks/palmistry/use-steps";
|
||
import { useDispatch } from "react-redux";
|
||
import { actions } from "@/store";
|
||
|
||
export default function StepGender() {
|
||
const steps = useSteps();
|
||
const dispatch = useDispatch();
|
||
|
||
const onNext = (choice: GenderChoice) => {
|
||
dispatch(actions.questionnaire.update({ gender: choice }));
|
||
steps.saveCurrent(choice);
|
||
steps.goNext(choice);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<h3 className="palmistry-container__header">What’s your gender?</h3>
|
||
|
||
<p className="palmistry-container__description">
|
||
In Palmistry, everyone is a blend of masculine and feminine, so it helps
|
||
to know yours.
|
||
</p>
|
||
|
||
<div className="palmistry-container__button-wrapper">
|
||
<Button
|
||
type="button"
|
||
active={steps.storedValue === GenderChoice.Male}
|
||
onClick={() => onNext(GenderChoice.Male)}
|
||
>
|
||
Male
|
||
</Button>
|
||
|
||
<Button
|
||
type="button"
|
||
active={steps.storedValue === GenderChoice.Female}
|
||
onClick={() => onNext(GenderChoice.Female)}
|
||
>
|
||
Female
|
||
</Button>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|