Make components

package-lock.json

@@ -7,8 +7,10 @@
       "dependencies": {
         "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-radio-group": "^1.1.3",
+        "clsx": "^2.1.1",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "tailwind-merge": "^2.3.0"
       },
       "devDependencies": {
         "autoprefixer": "^10.4.19",
@@ -1408,6 +1410,14 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2692,6 +2702,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.3.0.tgz",
+      "integrity": "sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==",
+      "dependencies": {
+        "@babel/runtime": "^7.24.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",

package.json

@@ -7,8 +7,10 @@
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-radio-group": "^1.1.3",
+    "clsx": "^2.1.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "tailwind-merge": "^2.3.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.19",

src/app.jsx

@@ -1,38 +1,31 @@
+import { useState } from "react";
 import * as RadioGroup from "@radix-ui/react-radio-group";
 import * as Checkbox from "@radix-ui/react-checkbox";
 
 import icon_checkbox_checked from "../assets/icon-checkbox-checked.svg";
 import icon_checkbox_unchecked from "../assets/icon-checkbox-unchecked.svg";
-import { useState } from "react";
+
+import { Button } from "./components/button";
+import { Input } from "./components/input";
 
 const InputField = ({ label, type = "text", required = false, ...props }) => {
-  const inputProps = {
-    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,
-    autoComplete: "off",
-    ...props,
-  };
-
   return (
     <label className="group block cursor-pointer space-y-100">
-      <div className="space-x-100">
+      <div className="space-x-100 text-body-sm text-grey-900 group-focus-within:text-green-600">
-        <span className="text-body-sm text-grey-900 group-focus-within:text-green-600">
+        <span>{label}</span>
-          {label}
+        {required && <span className="text-green-600">*</span>}
-        </span>
-        {required && <span className="text-body-sm text-green-600">*</span>}
       </div>
-      {type == "textarea" ? (
+      <Input
-        <textarea {...inputProps} />
+        name={label.toLowerCase().replace(/ /g, "_")}
-      ) : (
+        type={type}
-        <input type={type} {...inputProps} />
+        required={required}
-      )}
+        {...props}
+      />
     </label>
   );
 };
 
-export default () => {
+export default function App() {
   const [checkbox, setCheckbox] = useState(false);
 
   return (
@@ -90,19 +83,17 @@ export default () => {
               />
             </Checkbox.Root>
             <label
-              className="mx-200 cursor-pointer text-body-sm text-grey-900"
+              className="mx-200 cursor-pointer space-x-100 text-body-sm text-grey-900"
               htmlFor="c1"
             >
-              I consent to being contacted by the team{" "}
+              <span>I consent to being contacted by the team</span>
               <span className="text-green-600">*</span>
             </label>
           </div>
 
-          <button className="w-full rounded-lg bg-green-600 py-200 text-center text-body-md font-bold text-white hover:bg-grey-900">
+          <Button>Submit</Button>
-            Submit
-          </button>
         </form>
       </div>
     </div>
   );
-};
+}

src/components/button.jsx

@@ -0,0 +1,16 @@
+import { cn } from "../utils";
+
+const Button = React.forwardRef(({ className, ...props }, ref) => {
+  return (
+    <button
+      className={cn(
+        "w-full rounded-lg bg-green-600 py-200 text-center text-body-md font-bold text-white hover:bg-grey-900",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+export { Button };

src/components/input.jsx

@@ -0,0 +1,19 @@
+import { cn } from "../utils";
+
+const Input = React.forwardRef(({ type, className, ...props }, ref) => {
+  const Component = type == "textarea" ? "textarea" : "input";
+
+  return (
+    <Component
+      className={cn(
+        "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",
+        className,
+      )}
+      type={type}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+export { Input };

src/utils.js

@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}