64 lines
1.7 KiB
JavaScript
64 lines
1.7 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from "prop-types";
|
|
import { withStyles } from '@material-ui/core/styles';
|
|
import AssignmentIcon from '@material-ui/icons/Assignment';
|
|
import RoomIcon from '@material-ui/icons/Room';
|
|
import LocationOnIcon from '@material-ui/icons/LocationOn';
|
|
import HomeOnIcon from '@material-ui/icons/Home';
|
|
import WatchLater from '@material-ui/icons/WatchLater';
|
|
import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
|
|
import People from '@material-ui/icons/People';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import Business from '@material-ui/icons/Business';
|
|
import Place from '@material-ui/icons/Place';
|
|
|
|
const variantIcon = {
|
|
assignment: AssignmentIcon,
|
|
room: RoomIcon,
|
|
location_on: LocationOnIcon,
|
|
home: HomeOnIcon,
|
|
watch_later: WatchLater,
|
|
business_center: BusinessCenterIcon,
|
|
business: Business,
|
|
people: People,
|
|
place: Place,
|
|
};
|
|
|
|
const styles = theme => ({
|
|
root: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-start',
|
|
marginRight: theme.spacing(1),
|
|
},
|
|
icon: {
|
|
fontSize: '1.1em',
|
|
},
|
|
text: {
|
|
fontSize: '0.9em',
|
|
fontWeight: '200',
|
|
},
|
|
});
|
|
|
|
class IconTextInline extends React.Component {
|
|
|
|
render() {
|
|
const { classes, variant, text } = this.props;
|
|
const Icon = variantIcon[variant];
|
|
return (
|
|
<section className={classes.root}>
|
|
<Icon className={classes.icon} />
|
|
<Typography className={classes.text}>{text}</Typography>
|
|
</section>
|
|
|
|
);
|
|
}
|
|
}
|
|
|
|
IconTextInline.propTypes = {
|
|
classes: PropTypes.object.isRequired,
|
|
theme: PropTypes.object.isRequired,
|
|
text: PropTypes.string.isRequired,
|
|
};
|
|
|
|
export default withStyles(styles, { withTheme: true })(IconTextInline); |