refactor: split page into smaller components

src/components/TulajdonsagInput.tsx

@@ -18,8 +18,18 @@ function TulajdonsagInput(props: {
     fajiModosito: (faj: Faj) => number,
     register: () => any,
     getCurrentValue: () => number
+    tooLowError: string,
+    tooHighError: string
 }) {
-    const {tulajdonsag, register, currentFaj, getCurrentValue, fajiModosito} = props;
+    const {
+        tulajdonsag,
+        register,
+        currentFaj,
+        getCurrentValue,
+        fajiModosito,
+        tooLowError,
+        tooHighError,
+    } = props;
     return (<div className='row m-2'>
         <label className='col-lg-1 col-sm-2 col-form-label'>{tulajdonsag}</label>
         <div className='col-md-1 col-sm-2 m-2'>
@@ -35,9 +45,9 @@ function TulajdonsagInput(props: {
                             Módosító: { SignedNumberToText(Modifier(getCurrentValue() + fajiModosito(currentFaj()))) }
                         </span>
         {getCurrentValue() < 3 && (
-            <span className='form-field-error'>Túl gyenge vagy, nem bírtad felemelni a kezed a jelentkezéshez!</span>)}
+            <span className='form-field-error'>{tooLowError}</span>)}
         {getCurrentValue() > 18 && (
-            <span className='form-field-error'>Szét szakadtak az izmaid!</span>)}
+            <span className='form-field-error'>{tooHighError}</span>)}
     </div>)
 }