tm-landing/app/_contact-us/form.tsx

"use client";
import api from "@/service/api";
import { useForm } from "react-hook-form";
import { toast } from "react-toastify";
import InputGroup from "../_components/InputGroup";

type TContactUsForm = {
  full_name: string;
  company_name: string;
  work_email: string;
  phone_number: string;
};

type ContactUsFormProps = {
  columnsPerRow?: 1 | 2 | 3 | 4;
  buttonText?: string;
};

const ContactUsForm = ({
  columnsPerRow = 2,
  buttonText = "Submit",
}: ContactUsFormProps) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<TContactUsForm>();

  const onSubmit = async (data: TContactUsForm) => {
    try {
      const response = (await api.post("inquiries", { ...data })).data;
      toast.success(response.message);
    } catch (error) {
      console.log(error);
      toast.error("Something went wrong");
      throw error;
    }
  };

  const gridColsClass = {
    1: "lg:grid-cols-1",
    2: "lg:grid-cols-2",
    3: "lg:grid-cols-3",
    4: "lg:grid-cols-4",
  }[columnsPerRow];

  const colSpanClass = {
    1: "lg:col-span-1",
    2: "lg:col-span-2",
    3: "lg:col-span-3",
    4: "lg:col-span-4",
  }[columnsPerRow];

  return (
    <form
      className={`w-full px-4 lg:px-16 py-10 grid ${gridColsClass} gap-4`}
      onSubmit={handleSubmit(onSubmit)}>
      <InputGroup
        id="full_name"
        label="Full Name"
        register={register}
        type="text"
      />
      <InputGroup
        id="company_name"
        label="Company Name"
        register={register}
        type="text"
      />
      <InputGroup
        id="work_email"
        label="Work Email"
        register={register}
        type="email"
      />
      <InputGroup
        id="phone_number"
        label="Phone Number"
        register={register}
        type="text"
        error={errors.phone_number?.message}
        validation={{
          pattern: {
            value: /^[+\d]+$/,
            message: "Please enter a valid phone number",
          },
        }}
      />
      <div className={`${colSpanClass} flex justify-end`}>
        <button className="bg-(--primary) w-fit text-white rounded-full py-4 px-6">
          {buttonText}
        </button>
      </div>
    </form>
  );
};

export default ContactUsForm;