Try building

2025-01-22 22:38:19 -06:00
parent 112d9dd063
commit 5bfbb3b88c
15 changed files with 597 additions and 104 deletions
--- a/src/components/ContactForm.tsx
+++ b/src/components/ContactForm.tsx
@ -0,0 +1,140 @@
+import { createSignal, type Component } from "solid-js";
+import { Show } from "solid-js/web";
+
+const ContactForm: Component = () => {
+  const [email, setEmail] = createSignal("");
+  const [message, setMessage] = createSignal("");
+  const [status, setStatus] = createSignal<
+    "idle" | "sending" | "success" | "error"
+  >("idle");
+  const [errorMessage, setErrorMessage] = createSignal("");
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    setStatus("sending");
+    setErrorMessage("");
+
+    try {
+      const response = await fetch("/api/contact", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          email: email(),
+          message: message(),
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to send message");
+      }
+
+      setStatus("success");
+      setEmail("");
+      setMessage("");
+
+      // Reset success status after 3 seconds
+      setTimeout(() => setStatus("idle"), 3000);
+    } catch (error) {
+      setStatus("error");
+      setErrorMessage(
+        error instanceof Error ? error.message : "Failed to send message",
+      );
+    }
+  };
+
+  return (
+    <form class="space-y-6" onSubmit={handleSubmit}>
+      <div class="form-control w-full">
+        <label for="email" class="label">
+          <span class="label-text text-neutral-content">Email</span>
+        </label>
+        <input
+          type="email"
+          id="email"
+          required
+          class="input input-bordered w-full"
+          placeholder="your@email.com"
+          value={email()}
+          onInput={(e) => setEmail(e.currentTarget.value)}
+          disabled={status() === "sending"}
+        />
+      </div>
+
+      <div class="form-control w-full">
+        <label for="message" class="label">
+          <span class="label-text text-neutral-content">Message</span>
+        </label>
+        <textarea
+          id="message"
+          required
+          class="textarea textarea-bordered h-32"
+          placeholder="How can we help you?"
+          value={message()}
+          onInput={(e) => setMessage(e.currentTarget.value)}
+          disabled={status() === "sending"}
+        />
+      </div>
+
+      <Show when={status() === "error"}>
+        <div class="alert alert-error">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="stroke-current shrink-0 h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+          <span>
+            {errorMessage() || "Error sending message. Please try again."}
+          </span>
+        </div>
+      </Show>
+
+      <Show when={status() === "success"}>
+        <div class="alert alert-success">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="stroke-current shrink-0 h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+          <span>Message sent successfully!</span>
+        </div>
+      </Show>
+
+      <div class="card-actions justify-end">
+        <button
+          type="submit"
+          class="btn btn-primary"
+          disabled={status() === "sending"}
+        >
+          {status() === "sending" ? (
+            <>
+              <span class="loading loading-spinner"></span>
+              Sending...
+            </>
+          ) : (
+            "Send Message"
+          )}
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default ContactForm;