Untitled

import { twMerge } from "tailwind-merge";
import * as Label from "@radix-ui/react-label";
import { AtSymbolIcon, FingerPrintIcon, UserCircleIcon } from "@heroicons/react/24/outline";

// ? [ NOTE ]: Login and Terms of Service URLs
let LOGIN_URL = "http://localhost:3000/login"
let TOS_URL = "http://localhost:3000/policies/terms-of-service"

export default function SignupForm(){

    // @ts-ignore
    async function formSubmit(event: SubmitEvent){
        event.preventDefault()
        const formData = new FormData(event.currentTarget as HTMLFormElement)

        let formData2 = formData.get("username")

        console.info(formData2)
    }

    return (
        <form id="dosscord_signup_form" onSubmit={formSubmit} method="post" className={twMerge("w-96")}>
            <div className={twMerge("mb-12")}>
                <h2 className={twMerge("font-SourceCodePro text-3xl")}>
                    Get Started
                </h2>

                <p className={twMerge("text-lg font-normal font-SourceCodePro")}>
                    Already have a account?
                    <a
                        href={LOGIN_URL}
                        className={twMerge(
                            "ml-1",
                            "font-SourceCodePro font-bold text-primary tracking-tight"
                        )}
                    >
                        Log in
                    </a>
                    .
                </p>
            </div>

            <div
                id="username"
                className={twMerge("grid", "mb-4")}
            >
                <div>
                    <Label.Root className={twMerge("font-SourceCodePro text-xl")}>
                        <UserCircleIcon className={twMerge("w-7", "inline-grid")} />

                        <span className={twMerge("ml-4")}>Username</span>
                    </Label.Root>
                </div>

                <input
                    name="username"
                    className={twMerge(
                        "w-full",
                        "mt-3 w-[22rem]",
                        "input input-sm",
                        "bg-transparent",
                        "border-b-2 border-primary",
                        "focus:outline-none",
                        "hover:animate-fade-right hover:animate-once hover:animate-delay-[10ms] hover:animate-ease-linear",
                        "font-SourceCodePro"
                    )}
                    required
                />
            </div>

            <div
                id="password"
                className={twMerge("grid", "mb-4")}
            >
                <div>
                    <Label.Root className={twMerge("font-SourceCodePro text-xl", "mb-10")}>
                        <FingerPrintIcon className={twMerge("w-7", "inline-grid")} />

                        <span className={twMerge("ml-4")}>Password</span>
                    </Label.Root>
                </div>

                <input
                    name="password"
                    className={twMerge(
                        "w-full",
                        "mt-3 w-[22rem]",
                        "input input-sm",
                        "bg-transparent",
                        "border-b-2 border-primary",
                        "focus:outline-none",
                        "hover:animate-fade-right hover:animate-once hover:animate-delay-[10ms] hover:animate-ease-linear",
                        "font-SourceCodePro"
                    )}
                    required
                />
            </div>

            <div
                id="email"
                className={twMerge("grid", "mb-4")}
            >
                <div>
                    <Label.Root className={twMerge("font-SourceCodePro text-xl", "mb-10")}>
                        <AtSymbolIcon className={twMerge("w-7", "inline-grid")} />

                        <span className={twMerge("ml-4")}>Email</span>
                    </Label.Root>
                </div>

                <input
                    name="email"
                    className={twMerge(
                        "w-full",
                        "mt-3 w-[22rem]",
                        "input input-sm",
                        "bg-transparent",
                        "border-b-2 border-primary",
                        "focus:outline-none",
                        "hover:animate-fade-right hover:animate-once hover:animate-delay-[10ms] hover:animate-ease-linear",
                        "font-SourceCodePro"
                    )}
                    required
                />
            </div>

            <div className={twMerge("mt-8")}>
                <input
                    type="checkbox"
                    className={twMerge(
                        "checkbox",
                        "w-6 h-6",
                        "rounded-md border-2 border-primary outline-none bg-transparent"
                    )}
                />

                <span className={twMerge("ml-3", "font-SourceCodePro text-md")}>
                I've read and agreed to the
                <br />
                <a
                    href={TOS_URL}
                    className={twMerge(
                        "font-SourceCodePro font-bold text-primary-focus underline tracking-tight",
                        "ml-9"
                    )}
                >
                  Terms of Service
                </a>
              </span>
            </div>

            <button
                type="submit"
                className={twMerge(
                    "w-[22rem] mt-10 p-2",
                    "border-2 border-neutral bg-info text-white rounded-md font-SourceCodePro text-2xl"
                )}
            >
                Sign up
            </button>
        </form>
    )
}