inputs are coooomps

src/components/DurationInput.jsx

@@ -0,0 +1,19 @@
+const DurationInput = ({ onChangeCallback, loanDuration }) => {
+  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;

src/components/InterestInput.jsx

@@ -0,0 +1,19 @@
+const InterestInput = ({ onChangeCallback, loanInterest }) => {
+  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;

src/components/LoanPanel.jsx

@@ -1,53 +1,47 @@
 import { useState } from "react";
+import PrincipalInput from "./PrincipalInput";
+import DurationInput from "./DurationInput";
+import InterestInput from "./InterestInput";
 
 const LoanPanel = () => {
   const [hasBeenInteracted, setHasBeenInteracted] = useState(false);
-  const [loanPrincipal, setLoanPrincipal] = useState(null);
+  const [loanPrincipal, setLoanPrincipal] = useState("");
   const [loanDuration, setLoanDuration] = useState(12);
   const [loanInterest, setLoanInterest] = useState(5);
 
+  const handleLoanPrincipalChange = (event) => {
+    setHasBeenInteracted(1);
+    setLoanPrincipal(event.target.value);
+  };
+
+  const handleLoanDurationChange = (event) => {
+    setHasBeenInteracted(1);
+    setLoanDuration(event.target.value);
+  };
+
+  const handleLoanInterestChange = (event) => {
+    setHasBeenInteracted(1);
+    setLoanInterest(event.target.value);
+  };
+
   return (
     <>
       <div className="p-5 bg-gray-50 rounded-3xl border border-gray-400">
         <form className="flex flex-col justify-end items-end my-5 text-white bg-blue-600 p-5 rounded-3xl shadow-[0_4px_0_rgba(0,255,255,1)]">
-          <div className="flex">
+          <PrincipalInput
-            <label className="my-1" htmlFor="">
+            onChangeCallback={handleLoanPrincipalChange}
-              Capital prestado
+            loanPrincipal={loanPrincipal}
-            </label>
+          />
-            <input
+          <DurationInput
-              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"
+            onChangeCallback={handleLoanDurationChange}
-              value={loanPrincipal}
+            loanDuration={loanDuration}
-              placeholder="1000"
+          />
-            />
+          <InterestInput
-            <div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
+            onChangeCallback={handleLoanInterestChange}
-              €
+            loanInterest={loanInterest}
-            </div>
+          />
-          </div>
-          <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}
-              />
-            </label>
-            <div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
-              Meses
-            </div>
-          </div>
-          <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}
-              />
-            </label>
-            <div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
-              %
-            </div>
-          </div>
         </form>
+        {hasBeenInteracted ? <p>Someone touched meeee</p> : null}
       </div>
     </>
   );

src/components/PrincipalInput.jsx

@@ -0,0 +1,20 @@
+const PrincipalInput = ({onChangeCallback, loanPrincipal}) => {
+  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;