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

"use client";
import api from "@/service/api";
import { HTMLInputTypeAttribute } from "react";
import { RegisterOptions, useForm, UseFormRegister } from "react-hook-form";
import { toast } from "react-toastify";
type TContactUsForm = {
  full_name: string;
  company_name: string;
  work_email: string;
  phone_number: string;
};
const ContactUsForm = () => {
  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;
    }
  };
  return (
    <form
      className="w-full px-4 md:px-60 py-10"
      onSubmit={handleSubmit(onSubmit)}>
      <InputGroup
        icon={UserIcon}
        id="full_name"
        label="Full name"
        placeholder="Enter Full name"
        register={register}
        type="text"
      />
      <InputGroup
        icon={UserIcon}
        id="company_name"
        label="Company name"
        placeholder="Enter Company Name"
        register={register}
        type="text"
      />
      <InputGroup
        icon={UserIcon}
        id="work_email"
        label="Work email"
        placeholder="Enter Work Email"
        register={register}
        type="email"
      />
      <InputGroup
        icon={UserIcon}
        id="phone_number"
        label="Phone number"
        placeholder="Enter Phone Number"
        register={register}
        type="text"
        error={errors.phone_number?.message}
        validation={{
          pattern: {
            value: /^[+\d]+$/,
            message: "Please enter a valid phone number",
          },
        }}
      />
      <button className="bg-(--primary) w-full text-white rounded-full py-4">
        Submit
      </button>
    </form>
  );
};

export default ContactUsForm;
function InputGroup({
  icon,
  id,
  label,
  placeholder,
  register,
  type,
  validation,
  error,
}: {
  label: string;
  id: string;
  icon: () => React.JSX.Element;
  placeholder: string;
  register: UseFormRegister<any>;
  type: HTMLInputTypeAttribute;
  validation?: RegisterOptions;
  error?: string;
}) {
  return (
    <>
      <label htmlFor={id}>{label}</label>
      <div className="relative w-full my-3">
        <input
          type={type}
          className={`border ${
            error ? "border-red-500" : "border-gray-200"
          } p-2 px-10 rounded-lg w-full`}
          id={id}
          {...register(id, validation)}
          placeholder={placeholder}
        />
        <span className="absolute left-0 bottom-0 top-0 flex items-center pl-2">
          {icon()}
        </span>
      </div>
      {error && <p className="text-red-500 text-sm my-3">{error}</p>}
    </>
  );
}
function UserIcon() {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M16 6H15.25C15.25 7.79493 13.7949 9.25 12 9.25V10V10.75C14.6234 10.75 16.75 8.62335 16.75 6H16ZM12 10V9.25C10.2051 9.25 8.75 7.79493 8.75 6H8H7.25C7.25 8.62335 9.37665 10.75 12 10.75V10ZM8 6H8.75C8.75 4.20507 10.2051 2.75 12 2.75V2V1.25C9.37665 1.25 7.25 3.37665 7.25 6H8ZM12 2V2.75C13.7949 2.75 15.25 4.20507 15.25 6H16H16.75C16.75 3.37665 14.6234 1.25 12 1.25V2ZM9 13V13.75H15V13V12.25H9V13ZM15 21V20.25H9V21V21.75H15V21ZM9 21V20.25C7.20507 20.25 5.75 18.7949 5.75 17H5H4.25C4.25 19.6234 6.37665 21.75 9 21.75V21ZM19 17H18.25C18.25 18.7949 16.7949 20.25 15 20.25V21V21.75C17.6234 21.75 19.75 19.6234 19.75 17H19ZM15 13V13.75C16.7949 13.75 18.25 15.2051 18.25 17H19H19.75C19.75 14.3766 17.6234 12.25 15 12.25V13ZM9 13V12.25C6.37665 12.25 4.25 14.3766 4.25 17H5H5.75C5.75 15.2051 7.20507 13.75 9 13.75V13Z"
        fill="#9E9E9E"
      />
    </svg>
  );
}