From 52cbea16faeeb420e0eecf6d6bcf12a8767af318 Mon Sep 17 00:00:00 2001
From: Hadeed Ahmad <hadeedji@gmail.com>
Date: Thu, 6 Jun 2024 22:54:37 +0400
Subject: [PATCH] Add hover and active states

---
 src/app.jsx | 110 +++++++++++++++++++++++++---------------------------
 1 file changed, 53 insertions(+), 57 deletions(-)

diff --git a/src/app.jsx b/src/app.jsx
index 4f6a8ae..38e84c9 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -1,69 +1,65 @@
 import * as RadioGroup from "@radix-ui/react-radio-group";
 
+const InputField = ({ label, type = "text", required = false, ...props }) => {
+  return (
+    <label className="group block cursor-pointer space-y-100">
+      <div className="space-x-100">
+        <span className="text-body-sm text-grey-900 group-focus-within:text-green-600">
+          {label}
+        </span>
+        {required && <span className="text-body-sm text-green-600">*</span>}
+      </div>
+      <input
+        className="block w-full cursor-pointer rounded-lg border-[1px] border-grey-500 px-300 py-150 text-body-md focus:border-green-600 group-hover:border-green-600"
+        name={label.toLowerCase().replace(/ /g, "_")}
+        required={required}
+        type={type}
+        autoComplete="off"
+        {...props}
+      />
+    </label>
+  );
+};
+
 export default () => {
   return (
     <div className="min-h-dvh bg-green-200 px-200 py-400">
       <div className="rounded-2xl bg-white p-300 text-grey-900">
-        <h1 className="text-heading">Contact Us</h1>
+        <form action="">
+          <h1 className="text-heading">Contact Us</h1>
 
-        <div className="mt-400 space-y-300">
-          <div className="space-y-100">
-            <div className="space-x-100">
-              <label className="text-body-sm">First Name</label>
-              <span className="text-body-sm text-green-600">*</span>
+          <div className="mt-400 space-y-300">
+            <InputField label="First Name" required />
+            <InputField label="Last Name" required />
+            <InputField label="Email Address" type="email" required />
+
+            <div className="space-y-200">
+              <div className="space-x-100">
+                <label className="text-body-sm">Query Type</label>
+                <span className="text-body-sm text-green-600">*</span>
+              </div>
+
+              <RadioGroup.Root className="space-y-200" name="query_type">
+                {["General Enquiry", "Support Request"].map((label) => (
+                  <RadioGroup.Item
+                    className="group w-full rounded-lg border-[1px] border-grey-500 px-300 py-150 text-left hover:border-green-600 data-[state='checked']:border-green-600 data-[state='checked']:bg-green-200"
+                    value={label.toLowerCase().replace(/ /g, "_")}
+                    key={label}
+                  >
+                    <label className="flex cursor-pointer items-center justify-start gap-150 hover:text-green-600 group-data-[state='checked']:text-green-600">
+                      <span className="relative size-300 rounded-full border-2 border-solid border-grey-500 bg-transparent group-data-[state='checked']:border-green-600">
+                        <span className="absolute left-1/2 top-1/2 size-150 -translate-x-1/2 -translate-y-1/2 transform rounded-full bg-transparent group-data-[state='checked']:bg-green-600"></span>
+                      </span>
+                      <span className="text-body-md text-grey-900 group-hover:text-green-600 group-data-[state='checked']:text-green-600">
+                        {label}
+                      </span>
+                    </label>
+                  </RadioGroup.Item>
+                ))}
+              </RadioGroup.Root>
             </div>
-            <input
-              className="block w-full rounded-lg border-[1px] border-grey-500 px-300 py-150 text-body-md"
-              type="text"
-            />
           </div>
-
-          <div className="space-y-100">
-            <div className="space-x-100">
-              <label className="text-body-sm">Last Name</label>
-              <span className="text-body-sm text-green-600">*</span>
-            </div>
-            <input
-              className="block w-full rounded-lg border-[1px] border-grey-500 px-300 py-150 text-body-md"
-              type="text"
-            />
-          </div>
-
-          <div className="space-y-100">
-            <div className="space-x-100">
-              <label className="text-body-sm">Email Address</label>
-              <span className="text-body-sm text-green-600">*</span>
-            </div>
-            <input
-              className="block w-full rounded-lg border-[1px] border-grey-500 px-300 py-150 text-body-md"
-              type="text"
-            />
-          </div>
-
-          <div className="space-y-200">
-            <div className="space-x-100">
-              <label className="text-body-sm">Query Type</label>
-              <span className="text-body-sm text-green-600">*</span>
-            </div>
-
-            <RadioGroup.Root className="space-y-200" name="query_type">
-              {["General Enquiry", "Support Request"].map((label) => (
-                <RadioGroup.Item
-                  className="group w-full rounded-lg border-[1px] border-grey-500 px-300 py-150 text-left data-[state='checked']:border-green-600 data-[state='checked']:bg-green-200"
-                  value={label.toLowerCase().replace(/ /g, "_")}
-                  key={label}
-                >
-                  <label className="flex cursor-pointer items-center justify-start gap-150 hover:text-green-600 group-data-[state='checked']:text-green-600">
-                    <span className="bg-transparent relative size-300 rounded-full border-2 border-solid border-grey-500 group-data-[state='checked']:border-green-600">
-                      <span className="bg-transparent absolute left-1/2 top-1/2 size-150 -translate-x-1/2 -translate-y-1/2 transform rounded-full group-data-[state='checked']:bg-green-600"></span>
-                    </span>
-                    {label}
-                  </label>
-                </RadioGroup.Item>
-              ))}
-            </RadioGroup.Root>
-          </div>
-        </div>
+        </form>
       </div>
     </div>
   );