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