Registration Form

package.json

@@ -16,6 +16,7 @@
     "@fontsource/poppins": "^5.1.0",
     "@headlessui/react": "^2.1.10",
     "@heroicons/react": "^2.1.5",
+    "@hookform/resolvers": "^3.9.0",
     "@iconify-json/mdi": "^1.2.1",
     "@tailwindcss/typography": "^0.5.15",
     "@types/react": "^18.3.11",
@@ -28,7 +29,9 @@
     "prettier-plugin-tailwindcss": "^0.6.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.1",
     "tailwindcss": "^3.4.13",
-    "typescript": "^5.6.2"
+    "typescript": "^5.6.2",
+    "zod": "^3.23.8"
   }
 }

src/components/forms/component/alert.tsx

@@ -0,0 +1,23 @@
+import { clsx } from "clsx";
+
+interface Props {
+  type?: "error" | "success";
+  children?: React.ReactNode;
+}
+
+export function Alert({ type, children }: Props) {
+  const alertClasses = clsx("rounded-md p-4", {
+    "bg-red-50": type === "error",
+    "bg-green-50": type === "success",
+  });
+  const textClasses = clsx("text-sm font-medium", {
+    "text-red-800": type === "error",
+    "text-green-800": type === "success",
+  });
+
+  return (
+    <div className={alertClasses}>
+      <p className={textClasses}>{children}</p>
+    </div>
+  );
+}

src/components/forms/component/button.tsx

@@ -0,0 +1,44 @@
+import { clsx } from "clsx";
+import type { ComponentPropsWithRef } from "react";
+
+interface Props extends ComponentPropsWithRef<"button"> {
+  isLoading?: boolean;
+  children?: React.ReactNode;
+}
+
+export const Button = ({ isLoading, children, ...rest }: Props) => {
+  const buttonClasses = clsx(
+    "inline-flex justify-center rounded-md border border-transparent bg-wsg-orange-500 py-2 px-4 text-sm font-medium text-white shadow-sm",
+    {
+      "cursor-not-allowed opacity-60": isLoading,
+    },
+  );
+
+  return (
+    <button className={buttonClasses} disabled={isLoading} {...rest}>
+      {isLoading && (
+        <svg
+          className="-ml-1 mr-3 h-5 w-5 animate-spin text-white"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          ></circle>
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
+        </svg>
+      )}
+      {children}
+    </button>
+  );
+};

src/components/forms/component/input.tsx

@@ -0,0 +1,33 @@
+import { clsx } from "clsx";
+import { type ComponentPropsWithoutRef, forwardRef } from "react";
+
+interface Props extends ComponentPropsWithoutRef<"input"> {
+  id: string;
+  label: string;
+  error?: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, Props>(
+  ({ id, label, error, ...rest }, ref) => {
+    const inputClasses = clsx(
+      "block w-full rounded-lg focus:outline-none shadow-sm sm:text-sm border py-2 px-3",
+      {
+        "border-red-300 focus:border-red-500 focus:ring-red-500": error,
+        "border-gray-300 focus:border-wsg-orange-500 focus:ring-wsg-orange-500":
+          !error,
+      },
+    );
+
+    return (
+      <div>
+        <label htmlFor={id} className="block text-sm font-medium text-gray-700">
+          {label}
+        </label>
+        <div className="mt-1">
+          <input id={id} ref={ref} className={inputClasses} {...rest} />
+        </div>
+        {error && <p className="mt-2 text-sm text-red-600">{error}</p>}
+      </div>
+    );
+  },
+);

src/components/forms/component/select.tsx

@@ -0,0 +1,36 @@
+import { clsx } from "clsx";
+import { type ComponentPropsWithoutRef, forwardRef } from "react";
+
+interface Props extends ComponentPropsWithoutRef<"select"> {
+  id: string;
+  label: string;
+  error?: string;
+  children?: React.ReactNode;
+}
+
+export const Select = forwardRef<HTMLSelectElement, Props>(
+  ({ id, label, error, children, ...rest }, ref) => {
+    const inputClasses = clsx(
+      "block w-full rounded-lg focus:outline-none shadow-sm sm:text-sm border py-2 px-3",
+      {
+        "border-red-300 focus:border-red-500 focus:ring-red-500": error,
+        "border-gray-300 focus:border-wsg-orange-500 focus:ring-wsg-orange-500":
+          !error,
+      },
+    );
+
+    return (
+      <div>
+        <label htmlFor={id} className="block text-sm font-medium text-gray-700">
+          {label}
+        </label>
+        <div className="mt-1">
+          <select id={id} ref={ref} className={inputClasses} {...rest}>
+            {children}
+          </select>
+        </div>
+        {error && <p className="mt-2 text-sm text-red-600">{error}</p>}
+      </div>
+    );
+  },
+);