form 7 textfields

src/App.css

@@ -10,6 +10,12 @@
     height: 50px
 }
 
+.collapsable-form-style-form7 .MuiInputBase-root {
+    width: 400px !important;
+    margin: 5%;
+    height: 50px
+}
+
 .collapsable-form-style-multiline .MuiInputBase-root {
     width: 400px !important;
     margin: 5%;
@@ -23,6 +29,10 @@
     padding: 15px;
 }
 
+.collapsable-form-style-form7 label {
+    padding: 20px;
+}
+
 .collapsable-form-style-radioButtons{
     width: 300px !important;
     margin: 5%;

src/Components/PatientForm/RecreationalHobbiesSection7.tsx

@@ -5,13 +5,21 @@ interface FormValues {
     hobbies: string;
     educationLevel: string;
     excercise: string;
+    excerciseExplanation: string;
     tobacco: string;
+    tobaccoExplanation: string;
     alcohol: string;
+    alcoholExplanation: string;
     healthyDiet: string;
+    healthyDietExplanation: string;
     sleep: string;
+    sleepExplanation: string;
     workSchool: string;
+    workSchoolExplanation: string;
     familyLife: string;
+    familyLifeExplanation: string;
     drugs: string;
+    drugsExplanation:string;
   }
 
 export default function RecreationalHobbiesSection7(){
@@ -19,19 +27,25 @@ export default function RecreationalHobbiesSection7(){
           hobbies: '',
           educationLevel: '',
           excercise:'',
+          excerciseExplanation:'',
           tobacco: '',
+          tobaccoExplanation:'',
           alcohol: '',
+          alcoholExplanation:'',
           healthyDiet: '',
+          healthyDietExplanation:'',
           sleep: '',
+          sleepExplanation: '',
           workSchool: '',
+          workSchoolExplanation:'',
           familyLife: '',
+          familyLifeExplanation:'',
           drugs: '',
+          drugsExplanation:''
       });
     return(
         <>
-        {/* <Grid item xs={12} className='collapsable-form-style'> 
+        
-            <FormLabel sx={{fontWeight:600}}>Please choose body areas or systems where you may have problems:</FormLabel>
-        </Grid> */}
         <Grid container direction="row">
         <Grid item xs={6} className='collapsable-form-style-multiline'>
           <FormLabel>Recreational Activities/Hobbies:</FormLabel>
@@ -69,6 +83,7 @@ export default function RecreationalHobbiesSection7(){
                     </RadioGroup>
               </FormControl>
           </Grid>
+
           <Grid item xs={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Do you excercise?</FormLabel>
@@ -88,6 +103,20 @@ export default function RecreationalHobbiesSection7(){
               </FormControl>
           </Grid>
 
+          <Grid item xs={6} className='collapsable-form-style-form7'>
+                <TextField 
+                variant="outlined"
+                label="Times per week?" 
+                name='treatmentGoal'
+                onChange={(event) => {
+                  setValues((prevValues) => ({
+                    ...prevValues,
+                    excerciseExplanation: event.target.value,
+                  }));
+                }}
+                />
+            </Grid>
+
           <Grid item xs={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Use tobacco?</FormLabel>
@@ -107,6 +136,20 @@ export default function RecreationalHobbiesSection7(){
               </FormControl>
           </Grid>
 
+          <Grid item xs={6} className='collapsable-form-style-form7'>
+                <TextField 
+                variant="outlined"
+                label="Packs/Cans per day(If you have quit, when did you quit?)" 
+                name='treatmentGoal'
+                onChange={(event) => {
+                  setValues((prevValues) => ({
+                    ...prevValues,
+                    excerciseExplanation: event.target.value,
+                  }));
+                }}
+                />
+            </Grid>
+
           <Grid item xs={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Consume alcohol?</FormLabel>
@@ -126,6 +169,20 @@ export default function RecreationalHobbiesSection7(){
               </FormControl>
           </Grid>
 
+          <Grid item xs={6} className='collapsable-form-style-form7'>
+                <TextField 
+                variant="outlined"
+                label="How many drinks per week?" 
+                name='treatmentGoal'
+                onChange={(event) => {
+                  setValues((prevValues) => ({
+                    ...prevValues,
+                    alcoholExplanation: event.target.value,
+                  }));
+                }}
+                />
+            </Grid>
+
           <Grid item xs={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Have a healthy diet?</FormLabel>
@@ -145,6 +202,20 @@ export default function RecreationalHobbiesSection7(){
               </FormControl>
           </Grid>
 
+          <Grid item xs={6} className='collapsable-form-style-form7'>
+                <TextField 
+                variant="outlined"
+                label="If no, explain" 
+                name='treatmentGoal'
+                onChange={(event) => {
+                  setValues((prevValues) => ({
+                    ...prevValues,
+                    healthyDietExplanation: event.target.value,
+                  }));
+                }}
+                />
+          </Grid>
+
           <Grid item xs={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Get adequate sleep?</FormLabel>
@@ -164,6 +235,20 @@ export default function RecreationalHobbiesSection7(){
               </FormControl>
           </Grid>
 
+          <Grid item xs={6} className='collapsable-form-style-form7'>
+                <TextField 
+                variant="outlined"
+                label="If no, explain" 
+                name='treatmentGoal'
+                onChange={(event) => {
+                  setValues((prevValues) => ({
+                    ...prevValues,
+                    sleepExplanation: event.target.value,
+                  }));
+                }}
+                />
+          </Grid>
+
           <Grid item xs={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Is Work/School stressful to you?</FormLabel>
@@ -183,6 +268,20 @@ export default function RecreationalHobbiesSection7(){
               </FormControl>
           </Grid>
 
+          <Grid item xs={6} className='collapsable-form-style-form7'>
+                <TextField 
+                variant="outlined"
+                label="If yes, explain" 
+                name='treatmentGoal'
+                onChange={(event) => {
+                  setValues((prevValues) => ({
+                    ...prevValues,
+                    workSchool: event.target.value,
+                  }));
+                }}
+                />
+          </Grid>
+
           <Grid item xs={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Family life stressful to you?</FormLabel>
@@ -202,9 +301,23 @@ export default function RecreationalHobbiesSection7(){
               </FormControl>
           </Grid>
 
+          <Grid item xs={6} className='collapsable-form-style-form7'>
+                <TextField 
+                variant="outlined"
+                label="If yes, explain" 
+                name='treatmentGoal'
+                onChange={(event) => {
+                  setValues((prevValues) => ({
+                    ...prevValues,
+                    familyLifeExplanation: event.target.value,
+                  }));
+                }}
+                />
+          </Grid>
+
           <Grid item xs={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
-                    <FormLabel>use recreational drugs?</FormLabel>
+                    <FormLabel>Use recreational drugs?</FormLabel>
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
@@ -221,9 +334,19 @@ export default function RecreationalHobbiesSection7(){
               </FormControl>
           </Grid>
 
-          
+          <Grid item xs={6} className='collapsable-form-style-form7'>
-          
+                <TextField 
-            
+                variant="outlined"
+                label="If yes, explain" 
+                name='treatmentGoal'
+                onChange={(event) => {
+                  setValues((prevValues) => ({
+                    ...prevValues,
+                    drugsExplanation: event.target.value,
+                  }));
+                }}
+                />
+          </Grid>            
         </Grid>
         </>
     )