From 3c2edea9e06e7e5c4376a08a37723bf599b53335 Mon Sep 17 00:00:00 2001
From: Beau Findlay <me@beaufindlay.com>
Date: Wed, 24 Apr 2024 21:55:51 +0100
Subject: [PATCH] Add contact form

---
 src/Client/src/components/Button.tsx        | 19 +++++++
 src/Client/src/components/ContactForm.tsx   | 58 +++++++++++++++++++++
 src/Client/src/components/Label.tsx         | 12 +++++
 src/Client/src/components/TextAreaInput.tsx | 14 +++++
 src/Client/src/components/TextInput.tsx     | 14 +++++
 src/Client/src/components/Title.tsx         |  2 +-
 src/Client/src/pages/ContactPage.tsx        |  4 +-
 7 files changed, 121 insertions(+), 2 deletions(-)
 create mode 100644 src/Client/src/components/Button.tsx
 create mode 100644 src/Client/src/components/ContactForm.tsx
 create mode 100644 src/Client/src/components/Label.tsx
 create mode 100644 src/Client/src/components/TextAreaInput.tsx
 create mode 100644 src/Client/src/components/TextInput.tsx

diff --git a/src/Client/src/components/Button.tsx b/src/Client/src/components/Button.tsx
new file mode 100644
index 0000000..d0cfe57
--- /dev/null
+++ b/src/Client/src/components/Button.tsx
@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+
+interface Props {
+  type: "submit" | "button";
+  children: ReactNode;
+  onClick?: () => void;
+}
+
+export default function Button({ type, children, onClick }: Props) {
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      className="flex items-center justify-center border-0 ring-1 ring-inset ring-gray-300 bg-black px-3.5 py-2.5 text-sm font-semibold text-white shadow hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600 disabled:bg-gray-800 disabled:cursor-progress"
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/src/Client/src/components/ContactForm.tsx b/src/Client/src/components/ContactForm.tsx
new file mode 100644
index 0000000..6b3573c
--- /dev/null
+++ b/src/Client/src/components/ContactForm.tsx
@@ -0,0 +1,58 @@
+import { FaRegPaperPlane } from "react-icons/fa6";
+import Link from "./Link";
+import TextInput from "./TextInput";
+import TextAreaInput from "./TextAreaInput";
+import Button from "./Button";
+import Label from "./Label";
+
+export default function ContactForm() {
+  return (
+    <div className="mx-auto max-w-xl py-4">
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          console.log("Submitted");
+        }}
+      >
+        <div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
+          <div className="sm:col-span-2">
+            <Label htmlFor="name">Name</Label>
+            <div className="mt-2.5">
+              <TextInput id="name" type="text" />
+            </div>
+          </div>
+          <div className="sm:col-span-2">
+            <Label htmlFor="email">Email</Label>
+            <div className="mt-2.5">
+              <TextInput id="email" type="email" />
+            </div>
+          </div>
+          <div className="sm:col-span-2">
+            <Label htmlFor="message">Message</Label>
+            <div className="mt-2.5">
+              <TextAreaInput id="message" />
+            </div>
+          </div>
+        </div>
+        <div className="mt-4">
+          <small>
+            This site is protected by reCAPTCHA and the Google{" "}
+            <Link href="https://policies.google.com/privacy" target="_blank">
+              Privacy Policy
+            </Link>{" "}
+            and{" "}
+            <Link href="https://policies.google.com/terms" target="_blank">
+              Terms of Service
+            </Link>{" "}
+            apply.
+          </small>
+        </div>
+        <div className="mt-4 flex items-center justify-center">
+          <Button type="submit">
+            <FaRegPaperPlane className="mr-2" /> Send
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/src/Client/src/components/Label.tsx b/src/Client/src/components/Label.tsx
new file mode 100644
index 0000000..c35395e
--- /dev/null
+++ b/src/Client/src/components/Label.tsx
@@ -0,0 +1,12 @@
+interface Props {
+  htmlFor: string;
+  children: string;
+}
+
+export default function Label({ htmlFor, children }: Props) {
+  return (
+    <label htmlFor={htmlFor} className="block font-semibold leading-6">
+      {children}
+    </label>
+  );
+}
diff --git a/src/Client/src/components/TextAreaInput.tsx b/src/Client/src/components/TextAreaInput.tsx
new file mode 100644
index 0000000..6c1790f
--- /dev/null
+++ b/src/Client/src/components/TextAreaInput.tsx
@@ -0,0 +1,14 @@
+interface Props {
+  id: string;
+  rows?: number;
+}
+
+export default function TextAreaInput({ id, rows = 4 }: Props) {
+  return (
+    <textarea
+      id={id}
+      rows={rows}
+      className="block w-full text-lg border-0 px-3.5 py-2 bg-black shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600"
+    ></textarea>
+  );
+}
diff --git a/src/Client/src/components/TextInput.tsx b/src/Client/src/components/TextInput.tsx
new file mode 100644
index 0000000..74e2d09
--- /dev/null
+++ b/src/Client/src/components/TextInput.tsx
@@ -0,0 +1,14 @@
+interface Props {
+  id: string;
+  type: "text" | "email";
+}
+
+export default function TextInput({ id, type }: Props) {
+  return (
+    <input
+      id={id}
+      type={type}
+      className="block w-full text-lg border-0 px-3.5 py-2 bg-black shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600"
+    />
+  );
+}
diff --git a/src/Client/src/components/Title.tsx b/src/Client/src/components/Title.tsx
index f46b30d..ba25493 100644
--- a/src/Client/src/components/Title.tsx
+++ b/src/Client/src/components/Title.tsx
@@ -4,7 +4,7 @@ interface Props {
 }
 
 export default function Title({ children, className }: Props) {
-  const defaultStyles = "text-4xl";
+  const defaultStyles = "text-4xl py-4";
   const styles = className ? `${defaultStyles} ${className}` : defaultStyles;
 
   return <h1 className={styles}>{children}</h1>;
diff --git a/src/Client/src/pages/ContactPage.tsx b/src/Client/src/pages/ContactPage.tsx
index 1d17e85..57047d5 100644
--- a/src/Client/src/pages/ContactPage.tsx
+++ b/src/Client/src/pages/ContactPage.tsx
@@ -1,3 +1,4 @@
+import ContactForm from "../components/ContactForm";
 import Text from "../components/Text";
 import Title from "../components/Title";
 
@@ -5,10 +6,11 @@ export default function ContactPage() {
   return (
     <>
       <Title className="text-center">Contact</Title>
-      <Text className="text-center py-8">
+      <Text className="text-center pb-8">
         If you think I can help with your project or you'd just like to talk
         tech, send me a message!
       </Text>
+      <ContactForm />
     </>
   );
 }