shellphone.app/app/features/messages/components/new-message-area.tsx

import type { FunctionComponent } from "react";
import { useEffect, useRef } from "react";
import { Form, useTransition } from "@remix-run/react";
import { IoSend } from "react-icons/io5";

type Props = {
	onSend?: () => void;
	recipient: string;
};

const NewMessageArea: FunctionComponent<Props> = ({ onSend, recipient }) => {
	const transition = useTransition();
	const formRef = useRef<HTMLFormElement>(null);
	const textFieldRef = useRef<HTMLTextAreaElement>(null);
	const isSendingMessage = transition.state === "submitting";

	useEffect(() => {
		if (isSendingMessage) {
			formRef.current?.reset();
			textFieldRef.current?.focus();
			onSend?.();
		}
	}, [isSendingMessage, onSend]);

	return (
		<Form
			ref={formRef}
			action={`/messages/${recipient}`}
			method="post"
			className="absolute bottom-0 w-screen backdrop-filter backdrop-blur-xl bg-white bg-opacity-75 border-t flex flex-row p-2 pr-0"
			replace
		>
			<textarea
				ref={textFieldRef}
				name="content"
				className="resize-none rounded-full flex-1"
				style={{
					scrollbarWidth: "none",
				}}
				autoCapitalize="sentences"
				autoCorrect="on"
				placeholder="Text message"
				rows={1}
				spellCheck
				required
			/>
			<button type="submit">
				<IoSend className="h-8 w-8 pl-1 pr-2" />
			</button>
		</Form>
	);
};

export default NewMessageArea;