frontend/containers/Profile/ProfileField.tsx (view raw)
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;