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/ServerForm.tsx | 67 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 src/pages/logintest/ServerForm.tsx

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

diff --git a/src/pages/logintest/ServerForm.tsx b/src/pages/logintest/ServerForm.tsx
new file mode 100644
index 0000000..8e629b8
--- /dev/null
+++ b/src/pages/logintest/ServerForm.tsx
@@ -0,0 +1,67 @@
+async function submitUserProfile(formData: FormData) {
+  "use server";
+  const name = formData.get("name");
+  const age = formData.get("age");
+  const favoriteColor = formData.get("favoriteColor");
+  const hobby = formData.get("hobby");
+  const isSubscribed = formData.get("newsletter") === "on";
+
+  console.log({
+    name,
+    age,
+    favoriteColor,
+    hobby,
+    isSubscribed,
+  });
+}
+
+export const ServerForm = () => {
+  return (
+    <form action={submitUserProfile} className="space-y-4">
+      <div style={{ display: "flex", gap: 4, marginBottom: 4 }}>
+        <label htmlFor="name">Full Name</label>
+        <input type="text" name="name" id="name" required />
+      </div>
+
+      <div style={{ display: "flex", gap: 4, marginBottom: 4 }}>
+        <label htmlFor="age">Age</label>
+        <input type="number" name="age" id="age" min="13" max="120" />
+      </div>
+
+      <div style={{ display: "flex", gap: 4, marginBottom: 4 }}>
+        <label htmlFor="favoriteColor">Favorite Color</label>
+        <select name="favoriteColor" id="favoriteColor">
+          <option value="red">Red</option>
+          <option value="blue">Blue</option>
+          <option value="green">Green</option>
+          <option value="purple">Purple</option>
+          <option value="yellow">Yellow</option>
+        </select>
+      </div>
+
+      <div style={{ display: "flex", gap: 4, marginBottom: 4 }}>
+        <label htmlFor="hobby">Favorite Hobby</label>
+        <input
+          type="text"
+          name="hobby"
+          id="hobby"
+          placeholder="e.g. Reading, Gaming, Cooking"
+        />
+      </div>
+
+      <div style={{ display: "flex", gap: 4, marginBottom: 4 }}>
+        <label>
+          <input type="checkbox" name="newsletter" />
+          Subscribe to newsletter
+        </label>
+      </div>
+
+      <button
+        type="submit"
+        className="hover:bg-slate-50 w-fit rounded-lg bg-white p-2"
+      >
+        Save Profile
+      </button>
+    </form>
+  );
+};
-- 
cgit v1.2.3