From e839a5f61f0faa21ca8b4bd5767f7575d5e576ee Mon Sep 17 00:00:00 2001
From: polwex <polwex@sortug.com>
Date: Wed, 21 May 2025 14:00:28 +0700
Subject: the card flip animation is legit

---
 src/pages/logintest/Form.tsx | 53 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 src/pages/logintest/Form.tsx

(limited to 'src/pages/logintest/Form.tsx')

diff --git a/src/pages/logintest/Form.tsx b/src/pages/logintest/Form.tsx
new file mode 100644
index 0000000..a593acb
--- /dev/null
+++ b/src/pages/logintest/Form.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { useFormStatus } from "react-dom";
+
+const SubmitButton = () => {
+  const { pending } = useFormStatus();
+  return (
+    <>
+      <button
+        disabled={pending}
+        type="submit"
+        className="hover:bg-slate-50 w-fit rounded-lg bg-white p-2"
+      >
+        {pending ? "Pending..." : "Submit"}
+      </button>
+    </>
+  );
+};
+
+export const Form = ({
+  message,
+  greet,
+}: {
+  message: Promise<string>;
+  greet: (formData: FormData) => Promise<void>;
+}) => (
+  <div style={{ border: "3px blue dashed", margin: "1em", padding: "1em" }}>
+    <p>{message}</p>
+    <form action={greet}>
+      <div className="flex flex-col gap-1 text-left">
+        <div>
+          Name:{" "}
+          <input
+            name="name"
+            required
+            className="invalid:border-red-500 rounded-sm border px-2 py-1"
+          />
+        </div>
+        <div>
+          Email:{" "}
+          <input
+            type="email"
+            name="email"
+            required
+            className="invalid:border-red-500 rounded-sm border px-2 py-1"
+          />
+        </div>
+        <SubmitButton />
+      </div>
+    </form>
+    <h3>This is a client component.</h3>
+  </div>
+);
-- 
cgit v1.2.3