From b1026541106aab19e3fbb7894d1db93881d71e1b Mon Sep 17 00:00:00 2001
From: Peter Bull Hove <peterbullhove@gmail.com>
Date: Thu, 4 Apr 2024 11:50:03 +0200
Subject: [PATCH] feat: dynamic labels for the input field

---
 web/src/Components/Bridging/InputContainer.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/src/Components/Bridging/InputContainer.tsx b/web/src/Components/Bridging/InputContainer.tsx
index 9295a14..cba8b6f 100644
--- a/web/src/Components/Bridging/InputContainer.tsx
+++ b/web/src/Components/Bridging/InputContainer.tsx
@@ -16,6 +16,13 @@ type InputContainerProps = {
   bridgeValueHelperText: string
 }
 
+const InputLabels: { [key in BridgingOption]: string } = {
+  [BridgingOption.PERMEABILITY]: 'Permeability',
+  [BridgingOption.AVERAGE_PORESIZE]: 'Avg. Pore Size',
+  [BridgingOption.MAXIMUM_PORESIZE]: 'Max Pore Size',
+  [BridgingOption.CERAMIC_DISCS]: 'Disk Size',
+}
+
 const InputContainer = ({
   mode,
   onBridgeOptionChange,
@@ -77,11 +84,12 @@ const InputContainer = ({
         <div style={{ width: '150px' }}>
           {mode === BridgingOption.CERAMIC_DISCS ? (
             <div style={{ display: 'flex', flexDirection: 'column' }}>
-              <label htmlFor='ceramic-disk-selector'>Ceramic Discs Size</label>
+              {/* <label htmlFor='ceramic-disk-selector'>Ceramic Discs Size</label> */}
               <NativeSelect
                 onChange={event => onBridgeValueChange(event.target.value)}
                 id={'ceramic-disk-selector'}
-                label={''}
+                label={'Disk Size'}
+                meta={'microns'}
               >
                 {CeramicDiscsValues.map((value, index) => {
                   return (
@@ -91,11 +99,11 @@ const InputContainer = ({
                   )
                 })}
               </NativeSelect>
-              <small style={{ alignSelf: 'flex-end' }}>microns</small>
+              {/* <small style={{ alignSelf: 'flex-end' }}>microns</small> */}
             </div>
           ) : (
             <TextField
-              label='Value'
+              label={InputLabels[mode]}
               type='number'
               id='textfield-number'
               meta={unit}