shellphone.app/app/features/keypad/components/keypad-error-modal.tsx

54 lines
1.8 KiB
TypeScript
Raw Normal View History

2021-10-15 22:24:28 +00:00
import type { FunctionComponent } from "react";
import { useRef } from "react";
import { Link, useNavigate } from "@remix-run/react";
2021-10-15 22:24:28 +00:00
2022-05-14 10:22:06 +00:00
import Modal, { ModalTitle } from "~/features/core/components/modal";
2021-10-15 22:24:28 +00:00
type Props = {
isOpen: boolean;
closeModal: () => void;
};
const KeypadErrorModal: FunctionComponent<Props> = ({ isOpen, closeModal }) => {
const openSettingsButtonRef = useRef<HTMLButtonElement>(null);
2022-05-14 10:22:06 +00:00
const navigate = useNavigate();
2021-10-15 22:24:28 +00:00
return (
<Modal initialFocus={openSettingsButtonRef} isOpen={isOpen} onClose={closeModal}>
<div className="md:flex md:items-start">
<div className="mt-3 text-center md:mt-0 md:ml-4 md:text-left">
<ModalTitle>Woah, hold on! Set up your &#128026;phone number first</ModalTitle>
<div className="mt-2 text-gray-500">
<p>
First things first. Head over to your{" "}
2022-05-14 10:22:06 +00:00
<Link to="/settings/phone" className="underline">
phone settings
2021-10-15 22:24:28 +00:00
</Link>{" "}
to set up your phone number.
</p>
</div>
</div>
</div>
<div className="mt-5 md:mt-4 md:flex md:flex-row-reverse">
<button
ref={openSettingsButtonRef}
type="button"
2021-10-15 23:25:13 +00:00
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-primary-500 font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 md:mt-0 md:w-auto"
2022-05-14 10:22:06 +00:00
onClick={() => navigate("/settings/phone")}
2021-10-15 22:24:28 +00:00
>
Take me there
</button>
<button
type="button"
2021-10-15 23:25:13 +00:00
className="md:mr-2 mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white font-medium text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 md:mt-0 md:w-auto"
2021-10-15 22:24:28 +00:00
onClick={closeModal}
>
I got it, thanks!
</button>
</div>
</Modal>
);
};
export default KeypadErrorModal;