rudimentary contact form boilerplate

src/pages/Contact.tsx

@@ -1,3 +0,0 @@
-const Contact = () => <div>Hello "/contact"!</div>;
-
-export default Contact;

src/pages/Contact/Contact.container.tsx

@@ -0,0 +1,25 @@
+import Contact from "#/pages/Contact/Contact.tsx";
+
+const ContactContainer = () => {
+	const handleSubmit = async (_prevState: unknown, data: FormData) => {
+		const name = data.get("name");
+		const email = data.get("email");
+		const subject = data.get("subject");
+		const message = data.get("message");
+
+		try {
+			return { success: true, message: "Message sent!" };
+		} catch (error) {
+			// TODO logger
+			console.error("Error sending message:", error);
+			return {
+				success: false,
+				message: "Failed to send message. Please try again.",
+			};
+		}
+	};
+
+	return <Contact handleSubmit={handleSubmit} />;
+};
+
+export default ContactContainer;

src/pages/Contact/Contact.tsx

@@ -0,0 +1,90 @@
+import { useActionState } from "react";
+import Section from "#/components/Section.tsx";
+
+interface IFormField {
+	fieldName: string;
+	type: "text" | "email" | "textarea";
+	placeholder: string;
+	label: string;
+	required: boolean;
+}
+
+type IProps = {
+	handleSubmit: (
+		prevState: unknown,
+		formData: FormData,
+	) => Promise<{ success: boolean; message: string }>;
+};
+
+const FormField = ({
+	type,
+	fieldName,
+	placeholder,
+	label,
+	required,
+}: IFormField) => (
+	<div className="flex flex-col gap-2">
+		<label htmlFor={fieldName}>{label}</label>
+		<input
+			type={type}
+			id={fieldName}
+			name={fieldName}
+			placeholder={placeholder}
+			required={required}
+		/>
+	</div>
+);
+
+const Contact = ({ handleSubmit }: IProps) => {
+	const [state, formAction, isPending] = useActionState(handleSubmit, null);
+
+	return (
+		<main className="px-4 pb-8 place-self-center min-h-[calc(100vh-226px)]">
+			<Section
+				title="Contact Us"
+				description="Do you have suggestions on how to improve this service? Would you like to get involved with this project? Ask us anything you like."
+			>
+				<form action={formAction}>
+					<FormField
+						type="text"
+						fieldName="name"
+						placeholder="Your name"
+						label="Name"
+						required
+					/>
+
+					<FormField
+						fieldName="email"
+						type="text"
+						placeholder="name@example.com"
+						label="Email"
+						required
+					/>
+
+					<input
+						type="text"
+						name="subject"
+						placeholder="Reason for contacting us"
+					/>
+
+					<textarea
+						name="message"
+						placeholder="Your message here..."
+						required
+					/>
+
+					<button
+						type="submit"
+						disabled={isPending}
+						className="btn btn-primary"
+					>
+						{isPending ? "Sending..." : "Send"}
+					</button>
+					{state && <p>{state.message}</p>}
+				</form>
+			</Section>
+		</main>
+	);
+};
+
+export default Contact;

src/routes/contact.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { HOST_URL } from "#/config.ts";
-import Contact from "#/pages/Contact.tsx";
+import ContactContainer from "#/pages/Contact/Contact.container.tsx";
 
 export const Route = createFileRoute("/contact")({
 	head: () => ({
@@ -11,5 +11,5 @@ export const Route = createFileRoute("/contact")({
 });
 
 function RouteComponent() {
-	return <Contact />;
+	return <ContactContainer />;
 }