first commit

app/users/AddUserForm.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useActionState, JSX } from "react";
+import { addUserAction, FormState } from "../actions/UserActionsZod";
+import SubmitButton from "./SubmitButton";
+
+const initialState: FormState = {
+  success: false,
+  message: "",
+};
+
+export default function AddUserForm(): JSX.Element {
+  // useActionState receives (action, initialState)
+  const [state, formAction] = useActionState(addUserAction, initialState);
+
+  return (
+    <div className="card bg-base-100 shadow border border-base-300">
+      <div className="card-body">
+        <h2 className="card-title text-lg">
+          Add New User using Zod Validation
+        </h2>
+
+        {/* Global Success / Failure Alerts */}
+        {state.message && (
+          <div
+            className={`alert ${state.success ? "alert-success" : "alert-error"} text-sm py-2`}
+          >
+            <span>{state.message}</span>
+          </div>
+        )}
+
+        <form action={formAction} className="space-y-4 mt-2">
+          {/* Name Input */}
+          <div className="form-control">
+            <label className="label label-text font-medium">Name</label>
+            <input
+              type="text"
+              name="name"
+              placeholder="Jane Doe"
+              className={`input input-bordered w-full ${state.errors?.name ? "input-error" : ""}`}
+            />
+            {state.errors?.name && (
+              <span className="text-xs text-error mt-1">
+                {state.errors.name[0]}
+              </span>
+            )}
+          </div>
+
+          {/* Email Input */}
+          <div className="form-control">
+            <label className="label label-text font-medium">Email</label>
+            <input
+              type="email"
+              name="email"
+              placeholder="jane@example.com"
+              className={`input input-bordered w-full ${state.errors?.email ? "input-error" : ""}`}
+            />
+            {state.errors?.email && (
+              <span className="text-xs text-error mt-1">
+                {state.errors.email[0]}
+              </span>
+            )}
+          </div>
+
+          {/* Password Input */}
+          <div className="form-control">
+            <label className="label label-text font-medium">Password</label>
+            <input
+              type="password"
+              name="pass"
+              placeholder="••••••••"
+              className={`input input-bordered w-full ${state.errors?.pass ? "input-error" : ""}`}
+            />
+            {state.errors?.pass && (
+              <span className="text-xs text-error mt-1">
+                {state.errors.pass[0]}
+              </span>
+            )}
+          </div>
+
+          {/* Submit Button with Loading Spinner */}
+          <div className="flex justify-end pt-2">
+            <SubmitButton label="Create Account" />
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}