remixed v0

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

@@ -0,0 +1,54 @@
+import type { FunctionComponent } from "react";
+import { useRef } from "react";
+import { useNavigate } from "@remix-run/react";
+import { Link } from "react-router-dom";
+
+import Modal, { ModalTitle } from "~/features/core/components/modal";
+
+type Props = {
+	isOpen: boolean;
+	closeModal: () => void;
+};
+
+const KeypadErrorModal: FunctionComponent<Props> = ({ isOpen, closeModal }) => {
+	const openSettingsButtonRef = useRef<HTMLButtonElement>(null);
+	const navigate = useNavigate();
+
+	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{" "}
+							<Link to="/settings/phone" className="underline">
+								phone settings
+							</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"
+					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"
+					onClick={() => navigate("/settings/phone")}
+				>
+					Take me there
+				</button>
+				<button
+					type="button"
+					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"
+					onClick={closeModal}
+				>
+					I got it, thanks!
+				</button>
+			</div>
+		</Modal>
+	);
+};
+
+export default KeypadErrorModal;

app/features/keypad/components/keypad.tsx

@@ -0,0 +1,90 @@
+import type { FunctionComponent, PropsWithChildren } from "react";
+import type { PressHookProps } from "@react-aria/interactions";
+import { usePress } from "@react-aria/interactions";
+
+type Props = {
+	onDigitPressProps: (digit: string) => PressHookProps;
+	onZeroPressProps: PressHookProps;
+};
+
+const Keypad: FunctionComponent<PropsWithChildren<Props>> = ({ children, onDigitPressProps, onZeroPressProps }) => {
+	return (
+		<section>
+			<Row>
+				<Digit onPressProps={onDigitPressProps} digit="1" />
+				<Digit onPressProps={onDigitPressProps} digit="2">
+					<DigitLetters>ABC</DigitLetters>
+				</Digit>
+				<Digit onPressProps={onDigitPressProps} digit="3">
+					<DigitLetters>DEF</DigitLetters>
+				</Digit>
+			</Row>
+			<Row>
+				<Digit onPressProps={onDigitPressProps} digit="4">
+					<DigitLetters>GHI</DigitLetters>
+				</Digit>
+				<Digit onPressProps={onDigitPressProps} digit="5">
+					<DigitLetters>JKL</DigitLetters>
+				</Digit>
+				<Digit onPressProps={onDigitPressProps} digit="6">
+					<DigitLetters>MNO</DigitLetters>
+				</Digit>
+			</Row>
+			<Row>
+				<Digit onPressProps={onDigitPressProps} digit="7">
+					<DigitLetters>PQRS</DigitLetters>
+				</Digit>
+				<Digit onPressProps={onDigitPressProps} digit="8">
+					<DigitLetters>TUV</DigitLetters>
+				</Digit>
+				<Digit onPressProps={onDigitPressProps} digit="9">
+					<DigitLetters>WXYZ</DigitLetters>
+				</Digit>
+			</Row>
+			<Row>
+				<Digit onPressProps={onDigitPressProps} digit="*" />
+				<ZeroDigit onPressProps={onZeroPressProps} />
+				<Digit onPressProps={onDigitPressProps} digit="#" />
+			</Row>
+			{typeof children !== "undefined" ? <Row>{children}</Row> : null}
+		</section>
+	);
+};
+
+export default Keypad;
+
+const Row: FunctionComponent<PropsWithChildren<{}>> = ({ children }) => (
+	<div className="grid grid-cols-3 p-4 my-0 mx-auto text-black">{children}</div>
+);
+
+const DigitLetters: FunctionComponent<PropsWithChildren<{}>> = ({ children }) => <div className="text-xs text-gray-600">{children}</div>;
+
+type DigitProps = {
+	digit: string;
+	onPressProps: Props["onDigitPressProps"];
+};
+
+const Digit: FunctionComponent<PropsWithChildren<DigitProps>> = ({ children, digit, onPressProps }) => {
+	const { pressProps } = usePress(onPressProps(digit));
+
+	return (
+		<div {...pressProps} className="text-3xl cursor-pointer select-none">
+			{digit}
+			{children}
+		</div>
+	);
+};
+
+type ZeroDigitProps = {
+	onPressProps: Props["onZeroPressProps"];
+};
+
+const ZeroDigit: FunctionComponent<PropsWithChildren<ZeroDigitProps>> = ({ onPressProps }) => {
+	const { pressProps } = usePress(onPressProps);
+
+	return (
+		<div {...pressProps} className="text-3xl cursor-pointer select-none">
+			0 <DigitLetters>+</DigitLetters>
+		</div>
+	);
+};

app/features/keypad/hooks/use-key-press.ts

@@ -0,0 +1,17 @@
+import { useCallback, useEffect } from "react";
+
+export default function useKeyPress(onKeyPress: (key: string) => void) {
+	const onKeyDown = useCallback(
+		({ key }: KeyboardEvent) => {
+			onKeyPress(key);
+		},
+		[onKeyPress],
+	);
+
+	useEffect(() => {
+		window.addEventListener("keydown", onKeyDown);
+		return () => {
+			window.removeEventListener("keydown", onKeyDown);
+		};
+	}, [onKeyDown]);
+}