[docs] Enable avatar ts demos

Author: cojennin

docs/src/pages/demos/avatars/IconAvatars.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
+import pink from '@material-ui/core/colors/pink';
+import green from '@material-ui/core/colors/green';
+import Avatar, { AvatarProps } from '@material-ui/core/Avatar';
+import FolderIcon from '@material-ui/icons/Folder';
+import PageviewIcon from '@material-ui/icons/Pageview';
+import AssignmentIcon from '@material-ui/icons/Assignment';
+import Grid from '@material-ui/core/Grid';
+
+const styles = createStyles({
+  avatar: {
+    margin: 10,
+  },
+  pinkAvatar: {
+    margin: 10,
+    color: '#fff',
+    backgroundColor: pink[500],
+  },
+  greenAvatar: {
+    margin: 10,
+    color: '#fff',
+    backgroundColor: green[500],
+  },
+});
+
+export interface Props extends WithStyles<typeof styles> {}
+
+function IconAvatars(props: Props) {
+  const { classes } = props;
+  return (
+    <Grid container justify="center" alignItems="center">
+      <Avatar className={classes.avatar}>
+        <FolderIcon />
+      </Avatar>
+      <Avatar className={classes.pinkAvatar}>
+        <PageviewIcon />
+      </Avatar>
+      <Avatar className={classes.greenAvatar}>
+        <AssignmentIcon />
+      </Avatar>
+    </Grid>
+  );
+}
+
+IconAvatars.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(IconAvatars);

docs/src/pages/demos/avatars/ImageAvatars.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, WithStyles, createStyles  } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+import Grid from '@material-ui/core/Grid';
+
+const styles = createStyles({
+  avatar: {
+    margin: 10,
+  },
+  bigAvatar: {
+    margin: 10,
+    width: 60,
+    height: 60,
+  },
+});
+
+export interface Props extends WithStyles<typeof styles> {}
+
+function ImageAvatars(props: Props) {
+  const { classes } = props;
+  return (
+    <Grid container justify="center" alignItems="center">
+      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.avatar} />
+      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.bigAvatar} />
+    </Grid>
+  );
+}
+
+ImageAvatars.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(ImageAvatars);

docs/src/pages/demos/avatars/LetterAvatars.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+import deepOrange from '@material-ui/core/colors/deepOrange';
+import deepPurple from '@material-ui/core/colors/deepPurple';
+import Grid from '@material-ui/core/Grid';
+
+const styles = createStyles({
+  avatar: {
+    margin: 10,
+  },
+  orangeAvatar: {
+    margin: 10,
+    color: '#fff',
+    backgroundColor: deepOrange[500],
+  },
+  purpleAvatar: {
+    margin: 10,
+    color: '#fff',
+    backgroundColor: deepPurple[500],
+  },
+});
+
+export interface Props extends WithStyles<typeof styles> {}
+
+function LetterAvatars(props: Props) {
+  const { classes } = props;
+  return (
+    <Grid container justify="center" alignItems="center">
+      <Avatar className={classes.avatar}>H</Avatar>
+      <Avatar className={classes.orangeAvatar}>N</Avatar>
+      <Avatar className={classes.purpleAvatar}>OP</Avatar>
+    </Grid>
+  );
+}
+
+LetterAvatars.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(LetterAvatars);