signup.tsx

import inputVariants from "./input";
import buttonVariants from "./button";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import signUpSchema, { SignUpSchema } from "@/lib/validation/SignUp";
import { ariaInvalid } from "@/lib/utils";
import { trpc } from "@/app/_trpc/client";
import { useEffect } from "react";

const SignUp = () => {
  const {
    register,
    handleSubmit,
    setError,
    formState: { errors },
  } = useForm<SignUpSchema>({
    resolver: zodResolver(signUpSchema),
  });

  const { data, mutateAsync } = trpc.signUp.useMutation({});

  useEffect(() => {
    console.log(data);
  }, [data]);

  const onValid = async (data: SignUpSchema) => {
    await mutateAsync(data);
  };

  return (
    <form
      onSubmit={handleSubmit(onValid)}
      className="flex flex-col gap-10 p-8"
      noValidate
    >
      <div>
        <label htmlFor="username" className="block py-1 text-sm text-zinc-400">
          Username
        </label>
        <input
          className={inputVariants({ type: "transparent" })}
          id="username"
          {...register("username")}
          {...ariaInvalid(errors, "username")}
        />
        {errors.username?.message && (
          <span className="mt-1 block text-sm font-medium text-rose-600">
            {errors.username?.message}
          </span>
        )}
      </div>

      <div>
        <label htmlFor="email" className="mb-2 block text-sm text-zinc-400">
          Email
        </label>
        <input
          className={inputVariants({ type: "transparent" })}
          id="email"
          {...register("email")}
          {...ariaInvalid(errors, "email")}
        />
        {errors.email?.message && (
          <span className="mt-1 block text-sm font-medium text-rose-600">
            {errors.email?.message}
          </span>
        )}
      </div>

      <div>
        <label htmlFor="password" className="mb-2 block text-sm text-zinc-400">
          Password
        </label>
        <input
          className={inputVariants({ type: "transparent" })}
          id="password"
          type="password"
          {...register("password")}
          {...ariaInvalid(errors, "password")}
        />
        {errors.password?.message && (
          <span className="mt-1 block text-sm font-medium text-rose-600">
            {errors.password?.message}
          </span>
        )}
      </div>
      <div>
        <button className={buttonVariants({ size: "md", className: "w-full" })}>
          Sign-up
        </button>
        {errors.root?.message && (
          <span className="mt-1 block text-sm font-medium text-rose-600">
            {errors.root?.message}
          </span>
        )}
      </div>
    </form>
  );
};

export default SignUp;