text: (window.webpackJsonp=window.webpackJsonp||[]).push([[35],{1031:function(e,a,t){"use strict";var n=t(328);Object.defineProperty(a,"__esModule",{value:!0}),a.default=function(e,a){var t=c.default.memo(c.default.forwardRef(function(a,t){return c.default.createElement(o.default,(0,r.default)({},a,{ref:t}),e)}));0;return t.muiName=o.default.muiName,t};var r=n(t(2)),c=n(t(0)),o=n(t(967))},1033:function(e,a,t){"use strict";var n=t(2),r=t.n(n),c=t(1030),o=t(183);a.a=function(e){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Object(c.a)(e,r()({defaultTheme:o.a},a))}},1059:function(e,a,t){"use strict";Object.defineProperty(a,"__esModule",{value:!0}),a.default=void 0;var n={50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",A100:"#b9f6ca",A200:"#69f0ae",A400:"#00e676",A700:"#00c853"};a.default=n},1068:function(e,a,t){"use strict";var n=t(4),r=t.n(n),c=t(2),o=t.n(c),i=t(0),s=t.n(i),l=(t(1),t(3)),m=t(7),f=t(36),u=[0,1,2,3,4,5,6,7,8,9,10],d=["auto",!0,1,2,3,4,5,6,7,8,9,10,11,12];var v=s.a.forwardRef(function(e,a){var t=e.alignContent,n=void 0===t?"stretch":t,c=e.alignItems,i=void 0===c?"stretch":c,m=e.classes,f=e.className,u=e.component,d=void 0===u?"div":u,v=e.container,g=void 0!==v&&v,p=e.direction,x=void 0===p?"row":p,b=e.item,A=void 0!==b&&b,h=e.justify,y=void 0===h?"flex-start":h,E=e.lg,N=void 0!==E&&E,w=e.md,j=void 0!==w&&w,S=e.sm,I=void 0!==S&&S,k=e.spacing,C=void 0===k?0:k,M=e.wrap,O=void 0===M?"wrap":M,_=e.xl,z=void 0!==_&&_,P=e.xs,G=void 0!==P&&P,R=e.zeroMinWidth,H=void 0!==R&&R,W=r()(e,["alignContent","alignItems","classes","className","component","container","direction","item","justify","lg","md","sm","spacing","wrap","xl","xs","zeroMinWidth"]),F=Object(l.a)(m.root,f,g&&[m.container,0!==C&&m["spacing-xs-".concat(String(C))]],A&&m.item,H&&m.zeroMinWidth,"row"!==x&&m["direction-xs-".concat(String(x))],"wrap"!==O&&m["wrap-xs-".concat(String(O))],"stretch"!==i&&m["align-items-xs-".concat(String(i))],"stretch"!==n&&m["align-content-xs-".concat(String(n))],"flex-start"!==y&&m["justify-xs-".concat(String(y))],!1!==G&&m["grid-xs-".concat(String(G))],!1!==I&&m["grid-sm-".concat(String(I))],!1!==j&&m["grid-md-".concat(String(j))],!1!==N&&m["grid-lg-".concat(String(N))],!1!==z&&m["grid-xl-".concat(String(z))]);return s.a.createElement(d,o()({className:F,ref:a},W))});var g=Object(m.a)(function(e){return o()({root:{},container:{boxSizing:"border-box",display:"flex",flexWrap:"wrap",width:"100%"},item:{boxSizing:"border-box",margin:"0"},zeroMinWidth:{minWidth:0},"direction-xs-column":{flexDirection:"column"},"direction-xs-column-reverse":{flexDirection:"column-reverse"},"direction-xs-row-reverse":{flexDirection:"row-reverse"},"wrap-xs-nowrap":{flexWrap:"nowrap"},"wrap-xs-wrap-reverse":{flexWrap:"wrap-reverse"},"align-items-xs-center":{alignItems:"center"},"align-items-xs-flex-start":{alignItems:"flex-start"},"align-items-xs-flex-end":{alignItems:"flex-end"},"align-items-xs-baseline":{alignItems:"baseline"},"align-content-xs-center":{alignContent:"center"},"align-content-xs-flex-start":{alignContent:"flex-start"},"align-content-xs-flex-end":{alignContent:"flex-end"},"align-content-xs-space-between":{alignContent:"space-between"},"align-content-xs-space-around":{alignContent:"space-around"},"justify-xs-center":{justifyContent:"center"},"justify-xs-flex-end":{justifyContent:"flex-end"},"justify-xs-space-between":{justifyContent:"space-between"},"justify-xs-space-around":{justifyContent:"space-around"},"justify-xs-space-evenly":{justifyContent:"space-evenly"}},function(e,a){var t={};return u.forEach(function(n){var r=e.spacing(n);0!==r&&(t["spacing-".concat(a,"-").concat(n)]={margin:-r/2,width:"calc(100% + ".concat(r,"px)"),"& > $item":{padding:r/2}})}),t}(e,"xs"),f.b.reduce(function(a,t){return function(e,a,t){var n={};d.forEach(function(e){var a="grid-".concat(t,"-").concat(e);if(!0!==e)if("auto"!==e){var r="".concat(Math.round(e/12*1e8)/1e6,"%");n[a]={flexBasis:r,flexGrow:0,maxWidth:r}}else n[a]={flexBasis:"auto",flexGrow:0,maxWidth:"none"};else n[a]={flexBasis:0,flexGrow:1,maxWidth:"100%"}}),"xs"===t?Object.assign(e,n):e[a.breakpoints.up(t)]=n}(a,e,t),a},{}))},{name:"MuiGrid"})(v);a.a=g},1252:function(e,a,t){"use strict";var n=t(328);Object.defineProperty(a,"__esModule",{value:!0}),a.default=void 0;var r=n(t(0)),c=(0,n(t(1031)).default)(r.default.createElement(r.default.Fragment,null,r.default.createElement("path",{d:"M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"}),r.default.createElement("path",{fill:"none",d:"M0 0h24v24H0z"})),"Folder");a.default=c},1459:function(e,a,t){"use strict";t.r(a);var n=t(0),r=t.n(n),c=t(1033),o=t(507),i=t(1068),s=Object(c.a)({avatar:{margin:10},bigAvatar:{margin:10,width:60,height:60}});a.default=function(){var e=s();return r.a.createElement(i.a,{container:!0,justify:"center",alignItems:"center"},r.a.createElement(o.a,{alt:"Remy Sharp",src:"/static/images/avatar/1.jpg",className:e.avatar}),r.a.createElement(o.a,{alt:"Remy Sharp",src:"/static/images/avatar/1.jpg",className:e.bigAvatar}))}},1460:function(e,a){e.exports='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Avatar from \'@material-ui/core/Avatar\';\nimport Grid from \'@material-ui/core/Grid\';\n\nconst useStyles = makeStyles({\n  avatar: {\n    margin: 10,\n  },\n  bigAvatar: {\n    margin: 10,\n    width: 60,\n    height: 60,\n  },\n});\n\nfunction ImageAvatars() {\n  const classes = useStyles();\n\n  return (\n    <Grid container justify="center" alignItems="center">\n      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.avatar} />\n      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.bigAvatar} />\n    </Grid>\n  );\n}\n\nexport default ImageAvatars;\n'},1461:function(e,a,t){"use strict";t.r(a);var n=t(0),r=t.n(n),c=t(1033),o=t(507),i=t(1462),s=t.n(i),l=t(1463),m=t.n(l),f=t(1068),u=Object(c.a)({avatar:{margin:10},orangeAvatar:{margin:10,color:"#fff",backgroundColor:s.a[500]},purpleAvatar:{margin:10,color:"#fff",backgroundColor:m.a[500]}});a.default=function(){var e=u();return r.a.createElement(f.a,{container:!0,justify:"center",alignItems:"center"},r.a.createElement(o.a,{className:e.avatar},"H"),r.a.createElement(o.a,{className:e.orangeAvatar},"N"),r.a.createElement(o.a,{className:e.purpleAvatar},"OP"))}},1462:function(e,a,t){"use strict";Object.defineProperty(a,"__esModule",{value:!0}),a.default=void 0;var n={50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",A100:"#ff9e80",A200:"#ff6e40",A400:"#ff3d00",A700:"#dd2c00"};a.default=n},1463:function(e,a,t){"use strict";Object.defineProperty(a,"__esModule",{value:!0}),a.default=void 0;var n={50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",A100:"#b388ff",A200:"#7c4dff",A400:"#651fff",A700:"#6200ea"};a.default=n},1464:function(e,a){e.exports="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Avatar from '@material-ui/core/Avatar';\nimport deepOrange from '@material-ui/core/colors/deepOrange';\nimport deepPurple from '@material-ui/core/colors/deepPurple';\nimport Grid from '@material-ui/core/Grid';\n\nconst useStyles = makeStyles({\n  avatar: {\n    margin: 10,\n  },\n  orangeAvatar: {\n    margin: 10,\n    color: '#fff',\n    backgroundColor: deepOrange[500],\n  },\n  purpleAvatar: {\n    margin: 10,\n    color: '#fff',\n    backgroundColor: deepPurple[500],\n  },\n});\n\nfunction LetterAvatars() {\n  const classes = useStyles();\n\n  return (\n    <Grid container justify=\"center\" alignItems=\"center\">\n      <Avatar className={classes.avatar}>H</Avatar>\n      <Avatar className={classes.orangeAvatar}>N</Avatar>\n      <Avatar className={classes.purpleAvatar}>OP</Avatar>\n    </Grid>\n  );\n}\n\nexport default LetterAvatars;\n"},1465:function(e,a,t){"use strict";t.r(a);var n=t(0),r=t.n(n),c=t(1033),o=t(1466),i=t.n(o),s=t(1059),l=t.n(s),m=t(507),f=t(1252),u=t.n(f),d=t(1467),v=t.n(d),g=t(1468),p=t.n(g),x=t(1068),b=Object(c.a)({avatar:{margin:10},pinkAvatar:{margin:10,color:"#fff",backgroundColor:i.a[500]},greenAvatar:{margin:10,color:"#fff",backgroundColor:l.a[500]}});a.default=function(){var e=b();return r.a.createElement(x.a,{container:!0,justify:"center",alignItems:"center"},r.a.createElement(m.a,{className:e.avatar},r.a.createElement(u.a,null)),r.a.createElement(m.a,{className:e.pinkAvatar},r.a.createElement(v.a,null)),r.a.createElement(m.a,{className:e.greenAvatar},r.a.createElement(p.a,null)))}},1466:function(e,a,t){"use strict";Object.defineProperty(a,"__esModule",{value:!0}),a.default=void 0;var n={50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",A100:"#ff80ab",A200:"#ff4081",A400:"#f50057",A700:"#c51162"};a.default=n},1467:function(e,a,t){"use strict";var n=t(328);Object.defineProperty(a,"__esModule",{value:!0}),a.default=void 0;var r=n(t(0)),c=(0,n(t(1031)).default)(r.default.createElement(r.default.Fragment,null,r.default.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),r.default.createElement("path",{d:"M11.5 9C10.12 9 9 10.12 9 11.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5S12.88 9 11.5 9zM20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-3.21 14.21l-2.91-2.91c-.69.44-1.51.7-2.39.7C9.01 16 7 13.99 7 11.5S9.01 7 11.5 7 16 9.01 16 11.5c0 .88-.26 1.69-.7 2.39l2.91 2.9-1.42 1.42z"})),"Pageview");a.default=c},1468:function(e,a,t){"use strict";var n=t(328);Object.defineProperty(a,"__esModule",{value:!0}),a.default=void 0;var r=n(t(0)),c=(0,n(t(1031)).default)(r.default.createElement(r.default.Fragment,null,r.default.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),r.default.createElement("path",{d:"M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"})),"Assignment");a.default=c},1469:function(e,a){e.exports="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport pink from '@material-ui/core/colors/pink';\nimport green from '@material-ui/core/colors/green';\nimport Avatar from '@material-ui/core/Avatar';\nimport FolderIcon from '@material-ui/icons/Folder';\nimport PageviewIcon from '@material-ui/icons/Pageview';\nimport AssignmentIcon from '@material-ui/icons/Assignment';\nimport Grid from '@material-ui/core/Grid';\n\nconst useStyles = makeStyles({\n  avatar: {\n    margin: 10,\n  },\n  pinkAvatar: {\n    margin: 10,\n    color: '#fff',\n    backgroundColor: pink[500],\n  },\n  greenAvatar: {\n    margin: 10,\n    color: '#fff',\n    backgroundColor: green[500],\n  },\n});\n\nfunction IconAvatars() {\n  const classes = useStyles();\n\n  return (\n    <Grid container justify=\"center\" alignItems=\"center\">\n      <Avatar className={classes.avatar}>\n        <FolderIcon />\n      </Avatar>\n      <Avatar className={classes.pinkAvatar}>\n        <PageviewIcon />\n      </Avatar>\n      <Avatar className={classes.greenAvatar}>\n        <AssignmentIcon />\n      </Avatar>\n    </Grid>\n  );\n}\n\nexport default IconAvatars;\n"},2151:function(e,a,t){"use strict";t.r(a);var n=t(0),r=t.n(n),c=t(12),o=t(992),i=t(124),s=t(1010),l=t(1030),m=Object(l.a)(function(e){return{layoutRoot:{"& .description":{marginBottom:16}}}});a.default=function(e){var a=m();return r.a.createElement(c.s,{classes:{root:a.layoutRoot},header:r.a.createElement("div",{className:"flex flex-1 items-center justify-between p-24"},r.a.createElement("div",{className:"flex flex-col"},r.a.createElement("div",{className:"flex items-center mb-16"},r.a.createElement(o.a,{className:"text-18",color:"action"},"home"),r.a.createElement(o.a,{className:"text-16",color:"action"},"chevron_right"),r.a.createElement(i.a,{color:"textSecondary"},"Documentation"),r.a.createElement(o.a,{className:"text-16",color:"action"},"chevron_right"),r.a.createElement(i.a,{color:"textSecondary"},"Material UI Components")),r.a.createElement(i.a,{variant:"h6"},"Avatars")),r.a.createElement(s.a,{className:"normal-case",variant:"contained",component:"a",href:"https://material-ui.com/components/avatars",target:"_blank"},r.a.createElement(o.a,{className:"mr-4"},"link"),"Reference")),content:r.a.createElement("div",{className:"p-24 max-w-2xl"},r.a.createElement(i.a,{className:"text-44 mt-32 mb-8",component:"h1"},"Avatars"),r.a.createElement(i.a,{className:"description"},"Avatars are found throughout material design with uses in everything from tables to dialog menus."),r.a.createElement(i.a,{className:"text-32 mt-32 mb-8",component:"h2"},"Image avatars"),r.a.createElement(i.a,{className:"mb-16",component:"div"},"Image avatars can be created by passing standard ",r.a.createElement("code",null,"img")," props ",r.a.createElement("code",null,"src")," or ",r.a.createElement("code",null,"srcSet")," into the component."),r.a.createElement(i.a,{className:"mb-16",component:"div"},r.a.createElement(c.j,{className:"my-24",iframe:!1,component:t(1459).default,raw:t(1460)})),r.a.createElement(i.a,{className:"text-32 mt-32 mb-8",component:"h2"},"Letter avatars"),r.a.createElement(i.a,{className:"mb-16",component:"div"},"Avatars containing simple characters can be created by passing your string as ",r.a.createElement("code",null,"children"),"."),r.a.createElement(i.a,{className:"mb-16",component:"div"},r.a.createElement(c.j,{className:"my-24",iframe:!1,component:t(1461).default,raw:t(1464)})),r.a.createElement(i.a,{className:"text-32 mt-32 mb-8",component:"h2"},"Icon avatars"),r.a.createElement(i.a,{className:"mb-16",component:"div"},"Icon avatars are created by passing an icon as ",r.a.createElement("code",null,"children"),"."),r.a.createElement(i.a,{className:"mb-16",component:"div"},r.a.createElement(c.j,{className:"my-24",iframe:!1,component:t(1465).default,raw:t(1469)})))})}},967:function(e,a,t){"use strict";t.r(a);var n=t(329);t.d(a,"default",function(){return n.a})}}]);