boilerplate

src/components/CommentForm.tsx

@@ -0,0 +1,69 @@
+import { useState } from "react";
+
+import { api } from "~/utils/api";
+
+type CommentFormProps = {
+  postId: string;
+};
+
+const inputClassName =
+  "w-full rounded-[18px] border border-white/12 bg-[#0b1320] px-4 py-3 text-sm text-white outline-none transition placeholder:text-[#6c7790] focus:border-[#9db6ff] focus:bg-[#101928]";
+
+export const CommentForm = ({ postId }: CommentFormProps) => {
+  const utils = api.useUtils();
+  const [body, setBody] = useState("");
+  const [message, setMessage] = useState<string | null>(null);
+
+  const createComment = api.comment.create.useMutation({
+    onSuccess: async () => {
+      setBody("");
+      setMessage("Comment created.");
+      await utils.post.byId.invalidate({ postId });
+    },
+    onError: (error) => {
+      setMessage(error.message);
+    },
+  });
+
+  return (
+    <section className="rounded-[26px] border border-white/12 bg-[#0a1220]/85 p-5">
+      <div className="flex flex-col gap-2">
+        <p className="font-mono text-[#99b6ff] text-[11px] uppercase tracking-[0.24em]">Protected write route</p>
+        <h2 className="text-xl tracking-[-0.04em]">Add a comment</h2>
+      </div>
+
+      <form
+        className="mt-5 space-y-4"
+        onSubmit={(event) => {
+          event.preventDefault();
+          setMessage(null);
+          createComment.mutate({
+            body,
+            postId,
+          });
+        }}
+      >
+        <textarea
+          className={`${inputClassName} min-h-32 resize-y`}
+          maxLength={4000}
+          onChange={(event) => setBody(event.target.value)}
+          placeholder="Leave a short note on the post."
+          required
+          value={body}
+        />
+
+        {message ? (
+          <div className="rounded-[18px] border border-white/10 bg-white/[0.04] px-4 py-3 text-[#dbe4ff] text-sm">{message}</div>
+        ) : null}
+
+        <button
+          className="rounded-[18px] bg-[#9db6ff] px-4 py-3 font-mono text-[#09111d] text-[11px] uppercase tracking-[0.24em] transition hover:bg-[#b8cbff] disabled:cursor-not-allowed disabled:bg-[#556888] disabled:text-[#d4def8]"
+          disabled={createComment.isPending}
+          type="submit"
+        >
+          {createComment.isPending ? "Posting..." : "Post comment"}
+        </button>
+      </form>
+    </section>
+  );
+};