import React from "react"; import PropTypes from "prop-types"; import { withStyles, Grid, Hidden } from "material-ui"; import { RegularCard, P, A, ItemGrid } from "components"; import iconsStyle from "variables/styles/iconsStyle"; function Icons({ ...props }) { return ( <Grid container> <ItemGrid xs={12} sm={12} md={12}> <RegularCard plainCard cardTitle="Material Design Icons" cardSubtitle={ <P> Handcrafted by our friends from{" "} <A href="https://design.google.com/icons/" target="_blank" rel="noopener noreferrer" > Google </A> </P> } content={ <div> <Hidden only={["sm", "xs"]}> <iframe className={props.classes.iframe} src="https://material.io/icons/" title="Icons iframe" > <p>Your browser does not support iframes.</p> </iframe> </Hidden> <Hidden only={["lg", "md"]}> <ItemGrid xs={12} sm={12} md={6}> <h5> The icons are visible on Desktop mode inside an iframe. Since the iframe is not working on Mobile and Tablets please visit the icons on their original page on Google. Check the <a href="https://design.google.com/icons/" target="_blank" rel="noopener noreferrer" > Material Icons </a> </h5> </ItemGrid> </Hidden> </div> } /> </ItemGrid> </Grid> ); } Icons.propTypes = { classes: PropTypes.object.isRequired }; export default withStyles(iconsStyle)(Icons);