patient_Information_reactProject/src/Components/PatientDetails/RecreationalHobbiesSection7.tsx

import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, TextField } from "@mui/material";
import React from "react";

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(){
    return(
        <>
        
        <Grid container direction="row">
        <Grid item xs={12} className='collapsable-form-style-multiline'>
          <FormLabel>Recreational Activities/Hobbies:</FormLabel><br></br>
                <TextField 
                multiline
                variant="outlined"
                label="" 
                name='explanation'
              value=''
              disabled
                />
          </Grid>

        <Grid item xs={12} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Your education level:</FormLabel>
                    <RadioGroup
                        sx={{display:'flex', flexDirection:'row'}}
                        >
                        <FormControlLabel value="High School" control={<Radio />} label="High School" />
                        <FormControlLabel value="Some college" control={<Radio />} label="Some college" />
                        <FormControlLabel value="College Graduate" control={<Radio />} label="College Graduate" />
                        <FormControlLabel value="Post college" control={<Radio />} label="Post college" />
                        <FormControlLabel value="Other" control={<Radio />} label="Other" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Do you excercise?</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-form7'>
                <TextField 
                disabled
                variant="outlined"
                label="Times per week?" 
              name='treatmentGoal'
              value=''
                />
            </Grid>

          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Use tobacco?</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-form7'>
                <TextField 
                disabled
                variant="outlined"
                label="Packs/Cans per day(If you have quit, when did you quit?)" 
              name='treatmentGoal'
              value=''
                />
            </Grid>

          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Consume alcohol?</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-form7'>
                <TextField 
                disabled
                variant="outlined"
                label="How many drinks per week?" 
              name='treatmentGoal'
              value=''
                />
            </Grid>

          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Have a healthy diet?</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-form7'>
                <TextField 
                disabled
                variant="outlined"
                label="If no, explain" 
                name='treatmentGoal'
                value=''
                />
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Get adequate sleep?</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-form7'>
                <TextField 
                disabled
                variant="outlined"
                label="If no, explain" 
              name='treatmentGoal'
              value=''
                />
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Is Work/School stressful to you?</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-form7'>
                <TextField 
                variant="outlined"
                label="If yes, explain" 
                name='treatmentGoal'
                value=''
                disabled
                />
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Family life stressful to you?</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-form7'>
                <TextField 
                disabled
                variant="outlined"
                label="If yes, explain" 
                name='treatmentGoal'
                value=''
                />
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Use recreational drugs?</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-form7'>
                <TextField 
                disabled
                variant="outlined"
                label="If yes, explain" 
                name='treatmentGoal'
                value=''
                />
          </Grid>            
        </Grid>
        </>
    )
}