46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import Button from '../button/button';
|
|
import useSteps, { DecisionsChoice } from '../../../hooks/palmistry/use-steps';
|
|
|
|
export default function StepDecisions() {
|
|
const steps = useSteps();
|
|
|
|
const onNext = (choice: DecisionsChoice) => {
|
|
steps.saveCurrent(choice);
|
|
steps.goNext(choice);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="palmistry-container__title-wrapper">
|
|
<h3>Do you make decisions with your head or your heart?</h3>
|
|
</div>
|
|
|
|
<div className="palmistry-container__button-wrapper">
|
|
<Button
|
|
type="button"
|
|
active={steps.storedValue === DecisionsChoice.Heart}
|
|
onClick={() => onNext(DecisionsChoice.Heart)}
|
|
>
|
|
Heart
|
|
</Button>
|
|
|
|
<Button
|
|
type="button"
|
|
active={steps.storedValue === DecisionsChoice.Head}
|
|
onClick={() => onNext(DecisionsChoice.Head)}
|
|
>
|
|
Head
|
|
</Button>
|
|
|
|
<Button
|
|
type="button"
|
|
active={steps.storedValue === DecisionsChoice.Both}
|
|
onClick={() => onNext(DecisionsChoice.Both)}
|
|
>
|
|
Both
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|