base input

src/components/BaseInput.jsx

@@ -0,0 +1,28 @@
+const BaseInput = ({
+  label,
+  value,
+  onChangeCallback,
+  placeholder = "",
+  suffix,
+  inputWidth = "w-[60px]",
+  inputClassName = "",
+}) => {
+  return (
+    <div className="flex">
+      <label className="my-1" htmlFor="">
+        {label}
+        <input
+          className={`ml-3 ${inputWidth} bg-white rounded-tl-md rounded-bl-md text-black text-right p-1 ${inputClassName}`}
+          value={value}
+          placeholder={placeholder}
+          onChange={onChangeCallback}
+        />
+      </label>
+      <div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
+        {suffix}
+      </div>
+    </div>
+  );
+};
+
+export default BaseInput;

src/components/LoanDurationInput.jsx

@@ -1,19 +1,12 @@
-const DurationInput = ({ onChangeCallback, loanDuration }) => {
+import BaseInput from "./BaseInput";
-  return (
-    <div className="flex">
-      <label className="my-1" htmlFor="">
-        Duración
-        <input
-          className="ml-3 w-[60px] bg-white rounded-tl-md rounded-bl-md text-black text-right p-1"
-          value={loanDuration}
-          onChange={onChangeCallback}
-        />
-      </label>
-      <div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
-        Meses
-      </div>
-    </div>
-  );
-};
 
-export default DurationInput;
+const LoanDurationInput = ({ onChangeCallback, loanDuration }) => (
+  <BaseInput
+    label="Duración"
+    value={loanDuration}
+    onChangeCallback={onChangeCallback}
+    suffix="Meses"
+  />
+);
+
+export default LoanDurationInput;

src/components/LoanInterestInput.jsx

@@ -1,19 +1,12 @@
-const InterestInput = ({ onChangeCallback, loanInterest }) => {
+import BaseInput from "./BaseInput";
-  return (
-    <div className="flex">
-      <label className="my-1" htmlFor="">
-        Interés (TIN)
-        <input
-          className="ml-3 w-[60px] bg-white rounded-tl-md rounded-bl-md text-black text-right p-1"
-          value={loanInterest}
-          onChange={onChangeCallback}
-        />
-      </label>
-      <div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
-        %
-      </div>
-    </div>
-  );
-};
 
-export default InterestInput;
+const LoanInterestInput = ({ onChangeCallback, loanInterest }) => (
+  <BaseInput
+    label="Interés (TIN)"
+    value={loanInterest}
+    onChangeCallback={onChangeCallback}
+    suffix="%"
+  />
+);
+
+export default LoanInterestInput;

src/components/LoanPrincipalInput.jsx

@@ -1,20 +1,15 @@
-const PrincipalInput = ({onChangeCallback, loanPrincipal}) => {
+import BaseInput from "./BaseInput";
-  return (
-    <div className="flex">
-      <label className="my-1" htmlFor="">
-        Capital prestado
-      </label>
-      <input
-        className="ml-3 w-[120px] w-min-0 bg-white rounded-tl-md rounded-bl-md text-black text-right p-1 !placeholder-gray-300"
-        value={loanPrincipal}
-        placeholder="1000"
-        onChange={onChangeCallback}
-      />
-      <div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
-        €
-      </div>
-    </div>
-  );
-};
 
-export default PrincipalInput;
+const LoanPrincipalInput = ({ onChangeCallback, loanPrincipal }) => (
+  <BaseInput
+    label="Capital prestado"
+    value={loanPrincipal}
+    onChangeCallback={onChangeCallback}
+    suffix="€"
+    inputWidth="w-[120px]"
+    placeholder="1000"
+    inputClassName="placeholder-gray-400"
+  />
+);
+
+export default LoanPrincipalInput;