add input component

app/javascript/src/components/Input/Input.tsx

@@ -0,0 +1,30 @@
+import type { ChangeEvent } from "react";
+import React from "react";
+
+export type Props = React.DetailedHTMLProps<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+>;
+
+const baseStyles =
+  "rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent mb-3";
+
+const Component: React.ForwardRefRenderFunction<unknown, Props> = (props) => {
+  const { className = "", onChange, ...rest } = props;
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (!onChange) return;
+
+    onChange(e);
+  };
+
+  return (
+    <input
+      {...rest}
+      className={`${baseStyles} ${className}`}
+      onChange={handleChange}
+    />
+  );
+};
+
+export const Input = React.forwardRef<unknown, Props>(Component);

app/javascript/src/pages/Dashboard/Vault/RemoveStakeModal/RemoveStakeModal.tsx

@@ -1,14 +1,11 @@
 import BigNumber from "bignumber.js";
 import type { ChangeEvent, FC } from "react";
 import React, { useState } from "react";
-import cx from "classnames";
 import { useRelayEnvironment } from "react-relay";
 
 import { Modal } from "../../../../components";
 import { commitCreateStakeRemoveOrderMutation } from "./commitCreateStakeRemoveOrder";
-
+import { Input } from "../../../../components/Input/Input";
-const inputBaseStyles =
-  "rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent mb-3";
 
 type RemoveStakeModal = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -72,8 +69,7 @@ export const RemoveStakeModal: FC<RemoveStakeModal> = ({
       <span className="mb-2">CAKE disponível: {stakedCake}</span>
       <form onSubmit={onSubmit} className="bg-white py-2">
         <div className="flex flex-row">
-          <input
+          <Input
-            className={cx(inputBaseStyles)}
             type="number"
             value={amountInput}
             onChange={handleInvestInput}

app/javascript/src/pages/Home/StakeOrderModal/StakeOrderModal.tsx

@@ -1,20 +1,17 @@
 import type { ChangeEvent, FC } from "react";
 import React, { useState } from "react";
-import cx from "classnames";
 import { BigNumber } from "bignumber.js";
 import { useRelayEnvironment } from "react-relay";
 
 import { Modal } from "../../../components";
 import { commitCreateStakeOrderMutation } from "./createStakeOrder";
+import { Input } from "../../../components/Input/Input";
 
 type Props = {
   poolName: string;
   balance: string;
 };
 
-const inputBaseStyles =
-  "rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent mb-3";
-
 export const StakeOrderModal: FC<Props> = ({ poolName, balance }) => {
   const environment = useRelayEnvironment();
   const [isOpen, setIsOpen] = useState(false);
@@ -72,8 +69,7 @@ export const StakeOrderModal: FC<Props> = ({ poolName, balance }) => {
         <span className="mb-2">CAKE disponível: {balance}</span>
         <form onSubmit={onSubmit} className="bg-white py-2">
           <div className="flex flex-row">
-            <input
+            <Input
-              className={cx(inputBaseStyles)}
               type="number"
               value={investAmountInput}
               onChange={handleInvestInput}

app/javascript/src/pages/Orders/Exchange/ExchangePanel/ExchangePanel.tsx

@@ -11,6 +11,7 @@ import type { ExchangePanel_fiatBalances$key } from "./__generated__/ExchangePan
 import type { ExchangePanel_balances$key } from "./__generated__/ExchangePanel_balances.graphql";
 import { commitCreateSellCryptoOrderMutation } from "./createSellCryptoOrder";
 import { commitCreateBuyCryptoOrderMutation } from "./createBuyCryptoOrder";
+import { Input } from "../../../../components/Input/Input";
 
 const tabBaseStyles =
   "w-full text-base font-bold text-black px-4 py-2 focus:ring-blue-500";
@@ -18,9 +19,6 @@ const tabBaseStyles =
 const selectedTabStyles =
   "bg-blue-600 hover:bg-blue-700 rounded-l-frounded-full text-white";
 
-const inputBaseStyles =
-  "rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent mb-3";
-
 type Props = {
   fiatBalancesRefs: ExchangePanel_fiatBalances$key;
   balancesRefs: ExchangePanel_balances$key;
@@ -161,8 +159,7 @@ export const ExchangePanel: FC<Props> = ({
         <div className="flex flex-row">
           {exchangeOption === "BUY" ? (
             <>
-              <input
+              <Input
-                className={cx(inputBaseStyles)}
                 type="number"
                 value={fiatDock}
                 onChange={handleFiatAmountChange}
@@ -178,8 +175,7 @@ export const ExchangePanel: FC<Props> = ({
             </>
           ) : (
             <>
-              <input
+              <Input
-                className={cx(inputBaseStyles)}
                 type="number"
                 value={cryptoDock}
                 onChange={handleCryptoAmountChange}