frontend/containers/Profile/ProfileField.tsx (view raw)
1import Typography from '@material-ui/core/Typography';
2import TextField, {TextFieldProps} from '@material-ui/core/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;