import { Fragment } from "react"; import type { MetaFunction } from "@remix-run/node"; import { useNavigate } from "@remix-run/react"; import { useLoaderData } from "superjson-remix"; import { Transition } from "@headlessui/react"; import { IoBackspace, IoCall } from "react-icons/io5"; import keypadLoader, { type KeypadLoaderData } from "~/features/keypad/loaders/keypad"; import useKeyPress from "~/features/keypad/hooks/use-key-press"; import useOnBackspacePress from "~/features/keypad/hooks/use-on-backspace-press"; import Keypad from "~/features/keypad/components/keypad"; import BlurredKeypad from "~/features/keypad/components/blurred-keypad"; import MissingTwilioCredentials from "~/features/core/components/missing-twilio-credentials"; import { getSeoMeta } from "~/utils/seo"; import { usePhoneNumber, usePressDigit, useRemoveDigit } from "~/features/keypad/hooks/atoms"; export const meta: MetaFunction = () => ({ ...getSeoMeta({ title: "Keypad" }), }); export const loader = keypadLoader; export default function KeypadPage() { const { hasPhoneNumber, lastRecipientCalled } = useLoaderData(); const navigate = useNavigate(); const [phoneNumber, setPhoneNumber] = usePhoneNumber(); const removeDigit = useRemoveDigit(); const pressDigit = usePressDigit(); const onBackspacePress = useOnBackspacePress(); useKeyPress((key) => { if (key === "Backspace") { return removeDigit(); } pressDigit(key); }); if (!hasPhoneNumber) { return ( <> ); } return ( <>
{phoneNumber}
0} enter="transition duration-300 ease-in-out" enterFrom="transform scale-95 opacity-0" enterTo="transform scale-100 opacity-100" leave="transition duration-100 ease-out" leaveFrom="transform scale-100 opacity-100" leaveTo="transform scale-95 opacity-0" >
); }