clean up

treyrader11 · Jul 1, 2024 · 460b2d7 · 460b2d7
1 parent ea71a79
commit 460b2d7
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 64 deletions.
diff --git a/src/components/Contact/components/ContactForm/index.jsx b/src/components/Contact/components/ContactForm/index.jsx
@@ -13,8 +13,7 @@ import gsap from "gsap";
 import PaperPlane from "../PaperPlane";
 import { getPlaneKeyframes } from "../../getPlaneKeyframes";
 import { getTrailsKeyframes } from "../../getTrailsKeyframes";
-import Magnetic from "@/components/Magnetic";
-import { sendContactForm } from "@/lib/api";
+import SubmitEmail from "../SubmitEmail";
 
 const initValues = { name: "", email: "", subject: "", message: "" };
 
@@ -44,68 +43,16 @@ export default function ContactForm({ className }) {
       },
     }));
 
-  // const onSubmit = async (e) => {
-  //   e.preventDefault();
-
-  //   setState((prev) => ({
-  //     ...prev,
-  //     isLoading: true,
-  //   }));
-
-  //   try {
-  //     if (!isActive) {
-  //       setIsActive(true);
-
-  //       to(button, {
-  //         keyframes: getPlaneKeyframes(
-  //           set,
-  //           fromTo,
-  //           button,
-  //           setIsActive,
-  //           setState
-  //         ),
-  //       });
-
-  //       to(button, { keyframes: getTrailsKeyframes(button) });
-  //     }
-  //     // const data = await sendContactForm(values);
-  //     await sendContactForm(values);
-
-  //     // if (data.error) {
-  //     //   console.log("data.error", data.error);
-  //     //   setErrorMessage("Hey, you are already subscribed!");
-  //     //   setSuccessMessage(undefined);
-  //     //   return;
-  //     // }
-  //     setSuccessMessage("message sent");
-  //     setErrorMessage("");
-  //     setTouched({});
-  //     setState(initState);
-
-  //     // setSuccessMessage("message sent");
-  //     // setErrorMessage("");
-  //   } catch (error) {
-  //     setState((prev) => ({
-  //       ...prev,
-  //       isLoading: false,
-  //       error: error.message,
-  //     }));
-  //     setSuccessMessage("");
-  //     setErrorMessage("Message didn't send");
-  //   }
-  // };
-
   const handleSubmit = async (e) => {
     e.preventDefault();
 
-      // setState((prev) => ({
-      //   ...prev,
-      //   isLoading: true,
-      // }));
+    // setState((prev) => ({
+    //   ...prev,
+    //   isLoading: true,
+    // }));
 
     const { name, email, subject, message } = values;
     // const email = input;
-
 
     const button = buttonRef.current;
 
@@ -123,7 +70,7 @@ export default function ContactForm({ className }) {
           setIsActive,
           setInput,
           setState,
-          initState,
+          initState
         ),
       });
 
@@ -293,7 +240,7 @@ export default function ContactForm({ className }) {
   );
 }
 
-const Submit = forwardRef(({ isActive, input, disabled, isLoading }, ref) => {
+const Submit = forwardRef(({ isActive, disabled }, ref) => {
   return (
     <button
       style={{ WebkitTapHighlightColor: "transparent" }}
@@ -332,7 +279,7 @@ const Submit = forwardRef(({ isActive, input, disabled, isLoading }, ref) => {
       </span>
       <span
         className={cn(
-          // success determines animation/transform
+          // ".success" determines animation/transform
           "success",
           "text-emerald-500",
           "z-0",
@@ -355,12 +302,10 @@ const Submit = forwardRef(({ isActive, input, disabled, isLoading }, ref) => {
           strokeLinejoin="round"
           strokeDasharray={14}
           className={cn(
-            // "trails",
             "stroke-2",
             "w-6",
             "stroke-emerald-500",
             "pointer-events-none"
-            // { " opacity-100": isActive }
           )}
           viewBox="0 0 16 16"
         >

diff --git a/src/components/Contact/components/SubmitEmail/index.jsx b/src/components/Contact/components/SubmitEmail/index.jsx
@@ -0,0 +1,84 @@
+import { cn } from "@/lib/utils";
+import { VscSend } from "react-icons/vsc";
+import { forwardRef } from "react";
+import PaperPlane from "../PaperPlane";
+
+const SubmitEmail = forwardRef(({ isActive, disabled }, ref) => {
+  return (
+    <button
+      style={{ WebkitTapHighlightColor: "transparent" }}
+      ref={ref}
+      className={cn(
+        { active: isActive },
+        disabled &&
+          cn("disabled:grayscale-[65%]", "disabled:cursor-not-allowed"),
+        "text-sm",
+        "md:text-base",
+        "relative",
+        "py-2",
+        "min-4-[100px]",
+        "text-center",
+        "text-white",
+        "[transform:translateZ(0)]",
+        "transition-[opacity,filter]",
+        "duration-[0.25s]",
+        "flex",
+        "justify-center",
+        "items-center",
+        "w-full",
+        "mx-auto",
+        "py-6"
+      )}
+      // disabled={!input}
+      // disabled={disabled}
+      type="submit"
+    >
+      <span
+        className={cn("relative", "z-[4]", "flex", "items-center", "gap-2", {
+          "opacity-0": isActive,
+        })}
+      >
+        Send <VscSend />
+      </span>
+      <span
+        className={cn(
+          // ".success" determines animation/transform
+          "success",
+          "text-emerald-500",
+          "z-0",
+          "absolute",
+          "inset-x-0",
+          "top-2",
+          "-translate-x-3",
+          "flex",
+          "justify-center",
+          "items-center",
+          "opacity-0",
+          {
+            "opacity-100 [transform:translateX(-3px)_translateZ(0)]": isActive,
+          }
+        )}
+      >
+        <svg
+          // This is the check mark
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeDasharray={14}
+          className={cn(
+            "stroke-2",
+            "w-6",
+            "stroke-emerald-500",
+            "pointer-events-none"
+          )}
+          viewBox="0 0 16 16"
+        >
+          <polyline points="3.75 9 7 12 13 5" />
+        </svg>
+        Sent
+      </span>
+      <PaperPlane isActive={isActive} />
+    </button>
+  );
+});
+
+export default SubmitEmail.displayName = "SubmitEmail";
diff --git a/src/lib/emails/index.jsx b/src/lib/emails/index.jsx
@@ -22,7 +22,7 @@ const baseUrl = process.env.VERCEL_URL
   : "http://localhost:3000";
 
 export default function Email({ email }) {
-  console.log("Inside of the email template. email:", email);
+  // console.log("Inside of the email template. email:", email);
   return (
     <Tailwind
       config={{