add fuse

superpage/src/components/Course/Contact.jsx

@@ -0,0 +1,113 @@
+import { Form, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { createElement } from "react";
+import clsx from "clsx";
+import { z } from "zod";
+
+const schema = z.object({
+  name: z.string().nonempty({ message: "Deve preencher o nome" }),
+  email: z
+    .string()
+    .nonempty({ message: "Deve preencher o email" })
+    .email({ message: "Deve ser um email válido" }),
+  message: z.string().nonempty({ message: "Deve preencher a mensagem" }),
+});
+
+export default function Contact() {
+  const { register, formState, control, reset } = useForm({
+    resolver: zodResolver(schema),
+  });
+
+  return (
+    <Form
+      action="https://n8n.eduseg.com.br/webhook/a377b3e0-b159-4536-98ab-e13822b60562"
+      onSuccess={() => reset()}
+      control={control}
+      className="flex flex-col gap-2.5"
+    >
+      {formState.isSubmitSuccessful && (
+        <p className="border border-lime-400 text-white bg-lime-400/25 p-5 rounded-xl font-semibold">
+          Sua mensagem foi enviada com sucesso.
+        </p>
+      )}
+
+      <div>
+        <Label>
+          <span className="lg:w-14">Nome</span>
+          <Input
+            aria-invalid={!!formState.errors?.name}
+            {...register("name")}
+          />
+        </Label>
+        <Error>{formState.errors.name?.message}</Error>
+      </div>
+
+      <div>
+        <Label>
+          <span className="lg:w-14">Email</span>
+          <Input
+            aria-invalid={!!formState.errors?.name}
+            {...register("email")}
+          />
+        </Label>
+        <Error>{formState.errors.email?.message}</Error>
+      </div>
+
+      <div>
+        <Label className="flex-col !items-start !gap-1">
+          <span>Mensagem</span>
+          <Input
+            as="textarea"
+            className="h-28"
+            aria-invalid={!!formState.errors?.message}
+            {...register("message")}
+          />
+        </Label>
+        <Error className="lg:!pl-0">{formState.errors.message?.message}</Error>
+      </div>
+
+      <button
+        type="submit"
+        className="p-2.5 border border-lime-400/50 rounded-xl cursor-pointer transition"
+      >
+        Enviar
+      </button>
+    </Form>
+  );
+}
+
+export function Input({ as = "input", className, ...props }) {
+  return createElement(as, {
+    className: clsx(
+      "bg-white/10 focus:bg-white focus:text-black rounded-xl p-4 w-full focus:outline-0 transition duration-150",
+      "aria-invalid:outline-2 aria-invalid:outline-red-600",
+      className,
+    ),
+    ...props,
+  });
+}
+
+function Label({ children, className }) {
+  return (
+    <label
+      className={clsx(
+        "flex max-lg:flex-col lg:items-center gap-1 lg:gap-2.5",
+        className,
+      )}
+    >
+      {children}
+    </label>
+  );
+}
+
+function Error({ children, className }) {
+  if (children) {
+    return (
+      <p className={clsx("text-sm text-red-500 lg:pl-16", className)}>
+        {children}
+      </p>
+    );
+  }
+
+  return null;
+}