1import Typography from '@mui/material/Typography';
 2import TextField, {TextFieldProps} from '@mui/material/TextField';
 3import {Box} from '@mui/material';
 4
 5type Props = TextFieldProps & {
 6  isEditing: boolean;
 7};
 8
 9const ProfileField = (props: Props) => {
10  const {onChange, isEditing, ...inputProps} = props;
11  const {name, label, value, defaultValue = ''} = inputProps;
12
13  if (isEditing) {
14    return (
15      <Box mb={1}>
16        <TextField
17          fullWidth
18          margin="dense"
19          onChange={e => onChange(e.target.value)}
20          id={`Profile${name}`}
21          {...inputProps}
22        />
23      </Box>
24    );
25  }
26  return (
27    <Box mb={2}>
28      <Typography variant="caption">{label}</Typography>
29      <Typography variant="h6">{value || defaultValue}</Typography>
30    </Box>
31  );
32};
33export default ProfileField;