%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[20],{1130:function(e,t,n){"use strict";n.d(t,"a",(function(){return k}));var a=n(118),i=n(1100),s=n(1109),r=n(1090),c=n(1117),o=n(1119),l=n(5),m=n(0),d=n(1024),u=n(551),h=n(1087),b=n(1099),p=n(11),j=n(370),x=n(371),f=n(1131),I=n.n(f),L=n(1);const y=Object(d.a)({productionPrefix:"iframe-"});class O extends m.Component{constructor(){super(...arguments),this.state={ready:!1},this.handleRef=e=>{this.contentDocument=e?e.node.contentDocument:null},this.onContentDidMount=()=>{this.setState({ready:!0,jss:Object(j.a)({...Object(u.a)(),plugins:[...Object(u.a)().plugins,Object(x.a)()],insertionPoint:this.contentDocument.querySelector("#jss-demo-insertion-point")}),sheetsManager:new Map,container:this.contentDocument.body})},this.onContentDidUpdate=()=>{this.contentDocument.body.dir=this.props.theme.direction},this.renderHead=()=>Object(L.jsxs)(L.Fragment,{children:[Object(L.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(L.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:t,theme:n}=this.props;return Object(L.jsx)(I.a,{head:this.renderHead(),ref:this.handleRef,className:Object(l.a)(t.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(L.jsx)(h.b,{jss:this.state.jss,generateClassName:y,sheetsManager:this.state.sheetsManager,children:Object(L.jsx)(b.a,{theme:n,children:Object(m.cloneElement)(e,{container:this.state.container})})}):null})}}var v=Object(p.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(O);function g(e){const[t,n]=Object(m.useState)(e.currentTabIndex),{component:d,raw:u,iframe:h,className:b}=e;return Object(L.jsxs)(s.a,{className:Object(l.a)(b,"shadow"),children:[Object(L.jsx)(i.a,{position:"static",color:"default",className:"shadow-0",children:Object(L.jsxs)(o.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:t,onChange:function(e,t){n(t)},children:[d&&Object(L.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(L.jsx)(r.a,{children:"remove_red_eye"})}),u&&Object(L.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(L.jsx)(r.a,{children:"code"})})]})}),Object(L.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(L.jsx)("div",{className:0===t?"flex flex-1 max-w-full":"hidden",children:d&&(h?Object(L.jsx)(v,{children:Object(L.jsx)(d,{})}):Object(L.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(L.jsx)(d,{})}))}),Object(L.jsx)("div",{className:1===t?"flex flex-1":"hidden",children:u&&Object(L.jsx)("div",{className:"flex flex-1",children:Object(L.jsx)(a.a,{component:"pre",className:"language-javascript w-full",children:u.default})})})]})]})}g.defaultProps={currentTabIndex:0};var k=g},1173:function(e,t,n){"use strict";var a=n(552),i=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var s=i(n(0)),r=(0,a(n(1128)).default)(s.createElement("path",{d:"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"}),"ExpandMore");t.default=r},1176:function(e,t,n){"use strict";var a=n(552),i=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var s=i(n(0)),r=(0,a(n(1128)).default)(s.createElement("path",{d:"M19 3H4.99c-1.11 0-1.98.9-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10zm-3-5h-2V7h-4v3H8l4 4 4-4z"}),"MoveToInbox");t.default=r},1190:function(e,t,n){"use strict";var a=n(552),i=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var s=i(n(0)),r=(0,a(n(1128)).default)(s.createElement("path",{d:"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"}),"Delete");t.default=r},1250:function(e,t,n){"use strict";var a=n(552),i=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var s=i(n(0)),r=(0,a(n(1128)).default)(s.createElement("path",{d:"M21.99 8c0-.72-.37-1.35-.94-1.7L12 1 2.95 6.3C2.38 6.65 2 7.28 2 8v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2l-.01-10zM12 13L3.74 7.84 12 3l8.26 4.84L12 13z"}),"Drafts");t.default=r},1267:function(e,t,n){"use strict";var a=n(552),i=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var s=i(n(0)),r=(0,a(n(1128)).default)(s.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"}),"Folder");t.default=r},1296:function(e,t,n){"use strict";var a=n(552),i=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var s=i(n(0)),r=(0,a(n(1128)).default)(s.createElement("path",{d:"M13.127 14.56l1.43-1.43 6.44 6.443L19.57 21zm4.293-5.73l2.86-2.86c-3.95-3.95-10.35-3.96-14.3-.02 3.93-1.3 8.31-.25 11.44 2.88zM5.95 5.98c-3.94 3.95-3.93 10.35.02 14.3l2.86-2.86C5.7 14.29 4.65 9.91 5.95 5.98zm.02-.02l-.01.01c-.38 3.01 1.17 6.88 4.3 10.02l5.73-5.73c-3.13-3.13-7.01-4.68-10.02-4.3z"}),"BeachAccess");t.default=r},1298:function(e,t,n){"use strict";var a=n(552),i=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var s=i(n(0)),r=(0,a(n(1128)).default)(s.createElement("path",{d:"M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"}),"StarBorder");t.default=r},1299:function(e,t,n){"use strict";var a=n(552),i=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var s=i(n(0)),r=(0,a(n(1128)).default)(s.createElement("path",{d:"M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"}),"Send");t.default=r},1343:function(e,t,n){"use strict";var a=n(2),i=n(7),s=n(0),r=n(8),c=n(11),o=n(109),l=s.forwardRef((function(e,t){var n=e.classes,c=e.className,l=Object(i.a)(e,["classes","className"]),m=s.useContext(o.a);return s.createElement("div",Object(a.a)({className:Object(r.a)(n.root,c,"flex-start"===m.alignItems&&n.alignItemsFlexStart),ref:t},l))}));t.a=Object(c.a)({root:{minWidth:56,flexShrink:0},alignItemsFlexStart:{marginTop:8}},{name:"MuiListItemAvatar"})(l)},1349:function(e,t,n){"use strict";var a=n(552),i=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var s=i(n(0)),r=(0,a(n(1128)).default)(s.createElement("path",{d:"M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"}),"ExpandLess");t.default=r},1352:function(e,t,n){"use strict";var a=n(552),i=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var s=i(n(0)),r=(0,a(n(1128)).default)(s.createElement("path",{d:"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"}),"Image");t.default=r},1353:function(e,t,n){"use strict";var a=n(552),i=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var s=i(n(0)),r=(0,a(n(1128)).default)(s.createElement("path",{d:"M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"}),"Work");t.default=r},1446:function(e,t,n){"use strict";var a=n(552),i=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var s=i(n(0)),r=(0,a(n(1128)).default)(s.createElement("path",{d:"M19 3H4.99c-1.11 0-1.98.89-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z"}),"Inbox");t.default=r},2024:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return j}));n(0);var a=n(1072),i=n(1033),s=n(1034),r=n(1112),c=n(1103),o=n(1108),l=n(1446),m=n.n(l),d=n(1250),u=n.n(d),h=n(1);const b=Object(a.a)((e=>({root:{width:"100%",maxWidth:360,backgroundColor:e.palette.background.paper}})));function p(e){return Object(h.jsx)(s.a,{button:!0,component:"a",...e})}function j(){const e=b();return Object(h.jsxs)("div",{className:e.root,children:[Object(h.jsxs)(i.a,{component:"nav","aria-label":"main mailbox folders",children:[Object(h.jsxs)(s.a,{button:!0,children:[Object(h.jsx)(r.a,{children:Object(h.jsx)(m.a,{})}),Object(h.jsx)(c.a,{primary:"Inbox"})]}),Object(h.jsxs)(s.a,{button:!0,children:[Object(h.jsx)(r.a,{children:Object(h.jsx)(u.a,{})}),Object(h.jsx)(c.a,{primary:"Drafts"})]})]}),Object(h.jsx)(o.a,{}),Object(h.jsxs)(i.a,{component:"nav","aria-label":"secondary mailbox folders",children:[Object(h.jsx)(s.a,{button:!0,children:Object(h.jsx)(c.a,{primary:"Trash"})}),Object(h.jsx)(p,{href:"#simple-list",children:Object(h.jsx)(c.a,{primary:"Spam"})})]})]})}},2025:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Divider from '@material-ui/core/Divider';\nimport InboxIcon from '@material-ui/icons/Inbox';\nimport DraftsIcon from '@material-ui/icons/Drafts';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n maxWidth: 360,\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\nfunction ListItemLink(props) {\n return <ListItem button component=\"a\" {...props} />;\n}\n\nexport default function SimpleList() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <List component=\"nav\" aria-label=\"main mailbox folders\">\n <ListItem button>\n <ListItemIcon>\n <InboxIcon />\n </ListItemIcon>\n <ListItemText primary=\"Inbox\" />\n </ListItem>\n <ListItem button>\n <ListItemIcon>\n <DraftsIcon />\n </ListItemIcon>\n <ListItemText primary=\"Drafts\" />\n </ListItem>\n </List>\n <Divider />\n <List component=\"nav\" aria-label=\"secondary mailbox folders\">\n <ListItem button>\n <ListItemText primary=\"Trash\" />\n </ListItem>\n <ListItemLink href=\"#simple-list\">\n <ListItemText primary=\"Spam\" />\n </ListItemLink>\n </List>\n </div>\n );\n}\n"},2026:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return S}));var a=n(0),i=n.n(a),s=n(1072),r=n(1107),c=n(1033),o=n(1034),l=n(1112),m=n(1103),d=n(1106),u=n(1176),h=n.n(u),b=n(1250),p=n.n(b),j=n(1299),x=n.n(j),f=n(1349),I=n.n(f),L=n(1173),y=n.n(L),O=n(1298),v=n.n(O),g=n(1);const k=Object(s.a)((e=>({root:{width:"100%",maxWidth:360,backgroundColor:e.palette.background.paper},nested:{paddingLeft:e.spacing(4)}})));function S(){const e=k(),[t,n]=i.a.useState(!0);return Object(g.jsxs)(c.a,{component:"nav","aria-labelledby":"nested-list-subheader",subheader:Object(g.jsx)(r.a,{component:"div",id:"nested-list-subheader",children:"Nested List Items"}),className:e.root,children:[Object(g.jsxs)(o.a,{button:!0,children:[Object(g.jsx)(l.a,{children:Object(g.jsx)(x.a,{})}),Object(g.jsx)(m.a,{primary:"Sent mail"})]}),Object(g.jsxs)(o.a,{button:!0,children:[Object(g.jsx)(l.a,{children:Object(g.jsx)(p.a,{})}),Object(g.jsx)(m.a,{primary:"Drafts"})]}),Object(g.jsxs)(o.a,{button:!0,onClick:()=>{n(!t)},children:[Object(g.jsx)(l.a,{children:Object(g.jsx)(h.a,{})}),Object(g.jsx)(m.a,{primary:"Inbox"}),t?Object(g.jsx)(I.a,{}):Object(g.jsx)(y.a,{})]}),Object(g.jsx)(d.a,{in:t,timeout:"auto",unmountOnExit:!0,children:Object(g.jsx)(c.a,{component:"div",disablePadding:!0,children:Object(g.jsxs)(o.a,{button:!0,className:e.nested,children:[Object(g.jsx)(l.a,{children:Object(g.jsx)(v.a,{})}),Object(g.jsx)(m.a,{primary:"Starred"})]})})})]})}},2027:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ListSubheader from '@material-ui/core/ListSubheader';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Collapse from '@material-ui/core/Collapse';\nimport InboxIcon from '@material-ui/icons/MoveToInbox';\nimport DraftsIcon from '@material-ui/icons/Drafts';\nimport SendIcon from '@material-ui/icons/Send';\nimport ExpandLess from '@material-ui/icons/ExpandLess';\nimport ExpandMore from '@material-ui/icons/ExpandMore';\nimport StarBorder from '@material-ui/icons/StarBorder';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n maxWidth: 360,\n backgroundColor: theme.palette.background.paper,\n },\n nested: {\n paddingLeft: theme.spacing(4),\n },\n}));\n\nexport default function NestedList() {\n const classes = useStyles();\n const [open, setOpen] = React.useState(true);\n\n const handleClick = () => {\n setOpen(!open);\n };\n\n return (\n <List\n component=\"nav\"\n aria-labelledby=\"nested-list-subheader\"\n subheader={\n <ListSubheader component=\"div\" id=\"nested-list-subheader\">\n Nested List Items\n </ListSubheader>\n }\n className={classes.root}\n >\n <ListItem button>\n <ListItemIcon>\n <SendIcon />\n </ListItemIcon>\n <ListItemText primary=\"Sent mail\" />\n </ListItem>\n <ListItem button>\n <ListItemIcon>\n <DraftsIcon />\n </ListItemIcon>\n <ListItemText primary=\"Drafts\" />\n </ListItem>\n <ListItem button onClick={handleClick}>\n <ListItemIcon>\n <InboxIcon />\n </ListItemIcon>\n <ListItemText primary=\"Inbox\" />\n {open ? <ExpandLess /> : <ExpandMore />}\n </ListItem>\n <Collapse in={open} timeout=\"auto\" unmountOnExit>\n <List component=\"div\" disablePadding>\n <ListItem button className={classes.nested}>\n <ListItemIcon>\n <StarBorder />\n </ListItemIcon>\n <ListItemText primary=\"Starred\" />\n </ListItem>\n </List>\n </Collapse>\n </List>\n );\n}\n"},2028:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return x}));n(0);var a=n(1072),i=n(1033),s=n(1034),r=n(1103),c=n(1343),o=n(1124),l=n(1352),m=n.n(l),d=n(1353),u=n.n(d),h=n(1296),b=n.n(h),p=n(1);const j=Object(a.a)((e=>({root:{width:"100%",maxWidth:360,backgroundColor:e.palette.background.paper}})));function x(){const e=j();return Object(p.jsxs)(i.a,{className:e.root,children:[Object(p.jsxs)(s.a,{children:[Object(p.jsx)(c.a,{children:Object(p.jsx)(o.a,{children:Object(p.jsx)(m.a,{})})}),Object(p.jsx)(r.a,{primary:"Photos",secondary:"Jan 9, 2014"})]}),Object(p.jsxs)(s.a,{children:[Object(p.jsx)(c.a,{children:Object(p.jsx)(o.a,{children:Object(p.jsx)(u.a,{})})}),Object(p.jsx)(r.a,{primary:"Work",secondary:"Jan 7, 2014"})]}),Object(p.jsxs)(s.a,{children:[Object(p.jsx)(c.a,{children:Object(p.jsx)(o.a,{children:Object(p.jsx)(b.a,{})})}),Object(p.jsx)(r.a,{primary:"Vacation",secondary:"July 20, 2014"})]})]})}},2029:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport ListItemAvatar from '@material-ui/core/ListItemAvatar';\nimport Avatar from '@material-ui/core/Avatar';\nimport ImageIcon from '@material-ui/icons/Image';\nimport WorkIcon from '@material-ui/icons/Work';\nimport BeachAccessIcon from '@material-ui/icons/BeachAccess';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n maxWidth: 360,\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\nexport default function FolderList() {\n const classes = useStyles();\n\n return (\n <List className={classes.root}>\n <ListItem>\n <ListItemAvatar>\n <Avatar>\n <ImageIcon />\n </Avatar>\n </ListItemAvatar>\n <ListItemText primary=\"Photos\" secondary=\"Jan 9, 2014\" />\n </ListItem>\n <ListItem>\n <ListItemAvatar>\n <Avatar>\n <WorkIcon />\n </Avatar>\n </ListItemAvatar>\n <ListItemText primary=\"Work\" secondary=\"Jan 7, 2014\" />\n </ListItem>\n <ListItem>\n <ListItemAvatar>\n <Avatar>\n <BeachAccessIcon />\n </Avatar>\n </ListItemAvatar>\n <ListItemText primary=\"Vacation\" secondary=\"July 20, 2014\" />\n </ListItem>\n </List>\n );\n}\n"},2030:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return S}));var a=n(0),i=n.n(a),s=n(1072),r=n(1033),c=n(1034),o=n(1343),l=n(1112),m=n(1113),d=n(1103),u=n(1124),h=n(1028),b=n(1037),p=n(1094),j=n(1165),x=n(1172),f=n(194),I=n(1267),L=n.n(I),y=n(1190),O=n.n(y),v=n(1);const g=Object(s.a)((e=>({root:{flexGrow:1,maxWidth:752},demo:{backgroundColor:e.palette.background.paper},title:{margin:e.spacing(4,0,2)}})));function k(e){return[0,1,2].map((t=>i.a.cloneElement(e,{key:t})))}function S(){const e=g(),[t,n]=i.a.useState(!1),[a,s]=i.a.useState(!1);return Object(v.jsxs)("div",{className:e.root,children:[Object(v.jsxs)(b.a,{row:!0,children:[Object(v.jsx)(p.a,{control:Object(v.jsx)(j.a,{checked:t,onChange:e=>n(e.target.checked)}),label:"Enable dense"}),Object(v.jsx)(p.a,{control:Object(v.jsx)(j.a,{checked:a,onChange:e=>s(e.target.checked)}),label:"Enable secondary text"})]}),Object(v.jsxs)(x.a,{container:!0,spacing:2,children:[Object(v.jsxs)(x.a,{item:!0,xs:12,md:6,children:[Object(v.jsx)(f.a,{variant:"h6",className:e.title,children:"Text only"}),Object(v.jsx)("div",{className:e.demo,children:Object(v.jsx)(r.a,{dense:t,children:k(Object(v.jsx)(c.a,{children:Object(v.jsx)(d.a,{primary:"Single-line item",secondary:a?"Secondary text":null})}))})})]}),Object(v.jsxs)(x.a,{item:!0,xs:12,md:6,children:[Object(v.jsx)(f.a,{variant:"h6",className:e.title,children:"Icon with text"}),Object(v.jsx)("div",{className:e.demo,children:Object(v.jsx)(r.a,{dense:t,children:k(Object(v.jsxs)(c.a,{children:[Object(v.jsx)(l.a,{children:Object(v.jsx)(L.a,{})}),Object(v.jsx)(d.a,{primary:"Single-line item",secondary:a?"Secondary text":null})]}))})})]})]}),Object(v.jsxs)(x.a,{container:!0,spacing:2,children:[Object(v.jsxs)(x.a,{item:!0,xs:12,md:6,children:[Object(v.jsx)(f.a,{variant:"h6",className:e.title,children:"Avatar with text"}),Object(v.jsx)("div",{className:e.demo,children:Object(v.jsx)(r.a,{dense:t,children:k(Object(v.jsxs)(c.a,{children:[Object(v.jsx)(o.a,{children:Object(v.jsx)(u.a,{children:Object(v.jsx)(L.a,{})})}),Object(v.jsx)(d.a,{primary:"Single-line item",secondary:a?"Secondary text":null})]}))})})]}),Object(v.jsxs)(x.a,{item:!0,xs:12,md:6,children:[Object(v.jsx)(f.a,{variant:"h6",className:e.title,children:"Avatar with text and icon"}),Object(v.jsx)("div",{className:e.demo,children:Object(v.jsx)(r.a,{dense:t,children:k(Object(v.jsxs)(c.a,{children:[Object(v.jsx)(o.a,{children:Object(v.jsx)(u.a,{children:Object(v.jsx)(L.a,{})})}),Object(v.jsx)(d.a,{primary:"Single-line item",secondary:a?"Secondary text":null}),Object(v.jsx)(m.a,{children:Object(v.jsx)(h.a,{edge:"end","aria-label":"delete",children:Object(v.jsx)(O.a,{})})})]}))})})]})]})]})}},2031:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemAvatar from '@material-ui/core/ListItemAvatar';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Avatar from '@material-ui/core/Avatar';\nimport IconButton from '@material-ui/core/IconButton';\nimport FormGroup from '@material-ui/core/FormGroup';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport FolderIcon from '@material-ui/icons/Folder';\nimport DeleteIcon from '@material-ui/icons/Delete';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n maxWidth: 752,\n },\n demo: {\n backgroundColor: theme.palette.background.paper,\n },\n title: {\n margin: theme.spacing(4, 0, 2),\n },\n}));\n\nfunction generate(element) {\n return [0, 1, 2].map((value) =>\n React.cloneElement(element, {\n key: value,\n }),\n );\n}\n\nexport default function InteractiveList() {\n const classes = useStyles();\n const [dense, setDense] = React.useState(false);\n const [secondary, setSecondary] = React.useState(false);\n\n return (\n <div className={classes.root}>\n <FormGroup row>\n <FormControlLabel\n control={\n <Checkbox checked={dense} onChange={(event) => setDense(event.target.checked)} />\n }\n label=\"Enable dense\"\n />\n <FormControlLabel\n control={\n <Checkbox\n checked={secondary}\n onChange={(event) => setSecondary(event.target.checked)}\n />\n }\n label=\"Enable secondary text\"\n />\n </FormGroup>\n <Grid container spacing={2}>\n <Grid item xs={12} md={6}>\n <Typography variant=\"h6\" className={classes.title}>\n Text only\n </Typography>\n <div className={classes.demo}>\n <List dense={dense}>\n {generate(\n <ListItem>\n <ListItemText\n primary=\"Single-line item\"\n secondary={secondary ? 'Secondary text' : null}\n />\n </ListItem>,\n )}\n </List>\n </div>\n </Grid>\n <Grid item xs={12} md={6}>\n <Typography variant=\"h6\" className={classes.title}>\n Icon with text\n </Typography>\n <div className={classes.demo}>\n <List dense={dense}>\n {generate(\n <ListItem>\n <ListItemIcon>\n <FolderIcon />\n </ListItemIcon>\n <ListItemText\n primary=\"Single-line item\"\n secondary={secondary ? 'Secondary text' : null}\n />\n </ListItem>,\n )}\n </List>\n </div>\n </Grid>\n </Grid>\n <Grid container spacing={2}>\n <Grid item xs={12} md={6}>\n <Typography variant=\"h6\" className={classes.title}>\n Avatar with text\n </Typography>\n <div className={classes.demo}>\n <List dense={dense}>\n {generate(\n <ListItem>\n <ListItemAvatar>\n <Avatar>\n <FolderIcon />\n </Avatar>\n </ListItemAvatar>\n <ListItemText\n primary=\"Single-line item\"\n secondary={secondary ? 'Secondary text' : null}\n />\n </ListItem>,\n )}\n </List>\n </div>\n </Grid>\n <Grid item xs={12} md={6}>\n <Typography variant=\"h6\" className={classes.title}>\n Avatar with text and icon\n </Typography>\n <div className={classes.demo}>\n <List dense={dense}>\n {generate(\n <ListItem>\n <ListItemAvatar>\n <Avatar>\n <FolderIcon />\n </Avatar>\n </ListItemAvatar>\n <ListItemText\n primary=\"Single-line item\"\n secondary={secondary ? 'Secondary text' : null}\n />\n <ListItemSecondaryAction>\n <IconButton edge=\"end\" aria-label=\"delete\">\n <DeleteIcon />\n </IconButton>\n </ListItemSecondaryAction>\n </ListItem>,\n )}\n </List>\n </div>\n </Grid>\n </Grid>\n </div>\n );\n}\n"},2032:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return x}));var a=n(0),i=n.n(a),s=n(1072),r=n(1033),c=n(1034),o=n(1112),l=n(1103),m=n(1108),d=n(1446),u=n.n(d),h=n(1250),b=n.n(h),p=n(1);const j=Object(s.a)((e=>({root:{width:"100%",maxWidth:360,backgroundColor:e.palette.background.paper}})));function x(){const e=j(),[t,n]=i.a.useState(1),a=(e,t)=>{n(t)};return Object(p.jsxs)("div",{className:e.root,children:[Object(p.jsxs)(r.a,{component:"nav","aria-label":"main mailbox folders",children:[Object(p.jsxs)(c.a,{button:!0,selected:0===t,onClick:e=>a(0,0),children:[Object(p.jsx)(o.a,{children:Object(p.jsx)(u.a,{})}),Object(p.jsx)(l.a,{primary:"Inbox"})]}),Object(p.jsxs)(c.a,{button:!0,selected:1===t,onClick:e=>a(0,1),children:[Object(p.jsx)(o.a,{children:Object(p.jsx)(b.a,{})}),Object(p.jsx)(l.a,{primary:"Drafts"})]})]}),Object(p.jsx)(m.a,{}),Object(p.jsxs)(r.a,{component:"nav","aria-label":"secondary mailbox folder",children:[Object(p.jsx)(c.a,{button:!0,selected:2===t,onClick:e=>a(0,2),children:Object(p.jsx)(l.a,{primary:"Trash"})}),Object(p.jsx)(c.a,{button:!0,selected:3===t,onClick:e=>a(0,3),children:Object(p.jsx)(l.a,{primary:"Spam"})})]})]})}},2033:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Divider from '@material-ui/core/Divider';\nimport InboxIcon from '@material-ui/icons/Inbox';\nimport DraftsIcon from '@material-ui/icons/Drafts';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n maxWidth: 360,\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\nexport default function SelectedListItem() {\n const classes = useStyles();\n const [selectedIndex, setSelectedIndex] = React.useState(1);\n\n const handleListItemClick = (event, index) => {\n setSelectedIndex(index);\n };\n\n return (\n <div className={classes.root}>\n <List component=\"nav\" aria-label=\"main mailbox folders\">\n <ListItem\n button\n selected={selectedIndex === 0}\n onClick={(event) => handleListItemClick(event, 0)}\n >\n <ListItemIcon>\n <InboxIcon />\n </ListItemIcon>\n <ListItemText primary=\"Inbox\" />\n </ListItem>\n <ListItem\n button\n selected={selectedIndex === 1}\n onClick={(event) => handleListItemClick(event, 1)}\n >\n <ListItemIcon>\n <DraftsIcon />\n </ListItemIcon>\n <ListItemText primary=\"Drafts\" />\n </ListItem>\n </List>\n <Divider />\n <List component=\"nav\" aria-label=\"secondary mailbox folder\">\n <ListItem\n button\n selected={selectedIndex === 2}\n onClick={(event) => handleListItemClick(event, 2)}\n >\n <ListItemText primary=\"Trash\" />\n </ListItem>\n <ListItem\n button\n selected={selectedIndex === 3}\n onClick={(event) => handleListItemClick(event, 3)}\n >\n <ListItemText primary=\"Spam\" />\n </ListItem>\n </List>\n </div>\n );\n}\n"},2034:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return p}));var a=n(0),i=n.n(a),s=n(1072),r=n(1033),c=n(1034),o=n(1108),l=n(1103),m=n(1343),d=n(1124),u=n(194),h=n(1);const b=Object(s.a)((e=>({root:{width:"100%",maxWidth:"36ch",backgroundColor:e.palette.background.paper},inline:{display:"inline"}})));function p(){const e=b();return Object(h.jsxs)(r.a,{className:e.root,children:[Object(h.jsxs)(c.a,{alignItems:"flex-start",children:[Object(h.jsx)(m.a,{children:Object(h.jsx)(d.a,{alt:"Remy Sharp",src:"/material-ui-static/images/avatar/1.jpg"})}),Object(h.jsx)(l.a,{primary:"Brunch this weekend?",secondary:Object(h.jsxs)(i.a.Fragment,{children:[Object(h.jsx)(u.a,{component:"span",variant:"body2",className:e.inline,color:"textPrimary",children:"Ali Connors"})," \u2014 I'll be in your neighborhood doing errands this\u2026"]})})]}),Object(h.jsx)(o.a,{variant:"inset",component:"li"}),Object(h.jsxs)(c.a,{alignItems:"flex-start",children:[Object(h.jsx)(m.a,{children:Object(h.jsx)(d.a,{alt:"Travis Howard",src:"/material-ui-static/images/avatar/2.jpg"})}),Object(h.jsx)(l.a,{primary:"Summer BBQ",secondary:Object(h.jsxs)(i.a.Fragment,{children:[Object(h.jsx)(u.a,{component:"span",variant:"body2",className:e.inline,color:"textPrimary",children:"to Scott, Alex, Jennifer"})," \u2014 Wish I could come, but I'm out of town this\u2026"]})})]}),Object(h.jsx)(o.a,{variant:"inset",component:"li"}),Object(h.jsxs)(c.a,{alignItems:"flex-start",children:[Object(h.jsx)(m.a,{children:Object(h.jsx)(d.a,{alt:"Cindy Baker",src:"/material-ui-static/images/avatar/3.jpg"})}),Object(h.jsx)(l.a,{primary:"Oui Oui",secondary:Object(h.jsxs)(i.a.Fragment,{children:[Object(h.jsx)(u.a,{component:"span",variant:"body2",className:e.inline,color:"textPrimary",children:"Sandra Adams"})," \u2014 Do you have Paris recommendations? Have you ever\u2026"]})})]})]})}},2035:function(e,t,n){"use strict";n.r(t),t.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport List from \'@material-ui/core/List\';\nimport ListItem from \'@material-ui/core/ListItem\';\nimport Divider from \'@material-ui/core/Divider\';\nimport ListItemText from \'@material-ui/core/ListItemText\';\nimport ListItemAvatar from \'@material-ui/core/ListItemAvatar\';\nimport Avatar from \'@material-ui/core/Avatar\';\nimport Typography from \'@material-ui/core/Typography\';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: \'100%\',\n maxWidth: \'36ch\',\n backgroundColor: theme.palette.background.paper,\n },\n inline: {\n display: \'inline\',\n },\n}));\n\nexport default function AlignItemsList() {\n const classes = useStyles();\n\n return (\n <List className={classes.root}>\n <ListItem alignItems="flex-start">\n <ListItemAvatar>\n <Avatar alt="Remy Sharp" src="/material-ui-static/images/avatar/1.jpg" />\n </ListItemAvatar>\n <ListItemText\n primary="Brunch this weekend?"\n secondary={\n <React.Fragment>\n <Typography\n component="span"\n variant="body2"\n className={classes.inline}\n color="textPrimary"\n >\n Ali Connors\n </Typography>\n {" \u2014 I\'ll be in your neighborhood doing errands this\u2026"}\n </React.Fragment>\n }\n />\n </ListItem>\n <Divider variant="inset" component="li" />\n <ListItem alignItems="flex-start">\n <ListItemAvatar>\n <Avatar alt="Travis Howard" src="/material-ui-static/images/avatar/2.jpg" />\n </ListItemAvatar>\n <ListItemText\n primary="Summer BBQ"\n secondary={\n <React.Fragment>\n <Typography\n component="span"\n variant="body2"\n className={classes.inline}\n color="textPrimary"\n >\n to Scott, Alex, Jennifer\n </Typography>\n {" \u2014 Wish I could come, but I\'m out of town this\u2026"}\n </React.Fragment>\n }\n />\n </ListItem>\n <Divider variant="inset" component="li" />\n <ListItem alignItems="flex-start">\n <ListItemAvatar>\n <Avatar alt="Cindy Baker" src="/material-ui-static/images/avatar/3.jpg" />\n </ListItemAvatar>\n <ListItemText\n primary="Oui Oui"\n secondary={\n <React.Fragment>\n <Typography\n component="span"\n variant="body2"\n className={classes.inline}\n color="textPrimary"\n >\n Sandra Adams\n </Typography>\n {\' \u2014 Do you have Paris recommendations? Have you ever\u2026\'}\n </React.Fragment>\n }\n />\n </ListItem>\n </List>\n );\n}\n'},2036:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return x}));var a=n(0),i=n.n(a),s=n(1072),r=n(1033),c=n(1034),o=n(1112),l=n(1113),m=n(1103),d=n(1165),u=n(1028),h=n(2037),b=n.n(h),p=n(1);const j=Object(s.a)((e=>({root:{width:"100%",maxWidth:360,backgroundColor:e.palette.background.paper}})));function x(){const e=j(),[t,n]=i.a.useState([0]),a=e=>()=>{const a=t.indexOf(e),i=[...t];-1===a?i.push(e):i.splice(a,1),n(i)};return Object(p.jsx)(r.a,{className:e.root,children:[0,1,2,3].map((e=>{const n="checkbox-list-label-".concat(e);return Object(p.jsxs)(c.a,{role:void 0,dense:!0,button:!0,onClick:a(e),children:[Object(p.jsx)(o.a,{children:Object(p.jsx)(d.a,{edge:"start",checked:-1!==t.indexOf(e),tabIndex:-1,disableRipple:!0,inputProps:{"aria-labelledby":n}})}),Object(p.jsx)(m.a,{id:n,primary:"Line item ".concat(e+1)}),Object(p.jsx)(l.a,{children:Object(p.jsx)(u.a,{edge:"end","aria-label":"comments",children:Object(p.jsx)(b.a,{})})})]},e)}))})}},2037:function(e,t,n){"use strict";var a=n(552),i=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var s=i(n(0)),r=(0,a(n(1128)).default)(s.createElement("path",{d:"M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18zM18 14H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"}),"Comment");t.default=r},2038:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport IconButton from '@material-ui/core/IconButton';\nimport CommentIcon from '@material-ui/icons/Comment';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n maxWidth: 360,\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\nexport default function CheckboxList() {\n const classes = useStyles();\n const [checked, setChecked] = React.useState([0]);\n\n const handleToggle = (value) => () => {\n const currentIndex = checked.indexOf(value);\n const newChecked = [...checked];\n\n if (currentIndex === -1) {\n newChecked.push(value);\n } else {\n newChecked.splice(currentIndex, 1);\n }\n\n setChecked(newChecked);\n };\n\n return (\n <List className={classes.root}>\n {[0, 1, 2, 3].map((value) => {\n const labelId = `checkbox-list-label-${value}`;\n\n return (\n <ListItem key={value} role={undefined} dense button onClick={handleToggle(value)}>\n <ListItemIcon>\n <Checkbox\n edge=\"start\"\n checked={checked.indexOf(value) !== -1}\n tabIndex={-1}\n disableRipple\n inputProps={{ 'aria-labelledby': labelId }}\n />\n </ListItemIcon>\n <ListItemText id={labelId} primary={`Line item ${value + 1}`} />\n <ListItemSecondaryAction>\n <IconButton edge=\"end\" aria-label=\"comments\">\n <CommentIcon />\n </IconButton>\n </ListItemSecondaryAction>\n </ListItem>\n );\n })}\n </List>\n );\n}\n"},2039:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return p}));var a=n(0),i=n.n(a),s=n(1072),r=n(1033),c=n(1034),o=n(1113),l=n(1103),m=n(1343),d=n(1165),u=n(1124),h=n(1);const b=Object(s.a)((e=>({root:{width:"100%",maxWidth:360,backgroundColor:e.palette.background.paper}})));function p(){const e=b(),[t,n]=i.a.useState([1]),a=e=>()=>{const a=t.indexOf(e),i=[...t];-1===a?i.push(e):i.splice(a,1),n(i)};return Object(h.jsx)(r.a,{dense:!0,className:e.root,children:[0,1,2,3].map((e=>{const n="checkbox-list-secondary-label-".concat(e);return Object(h.jsxs)(c.a,{button:!0,children:[Object(h.jsx)(m.a,{children:Object(h.jsx)(u.a,{alt:"Avatar n\xb0".concat(e+1),src:"/material-ui-static/images/avatar/".concat(e+1,".jpg")})}),Object(h.jsx)(l.a,{id:n,primary:"Line item ".concat(e+1)}),Object(h.jsx)(o.a,{children:Object(h.jsx)(d.a,{edge:"end",onChange:a(e),checked:-1!==t.indexOf(e),inputProps:{"aria-labelledby":n}})})]},e)}))})}},2040:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport ListItemAvatar from '@material-ui/core/ListItemAvatar';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport Avatar from '@material-ui/core/Avatar';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n maxWidth: 360,\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\nexport default function CheckboxListSecondary() {\n const classes = useStyles();\n const [checked, setChecked] = React.useState([1]);\n\n const handleToggle = (value) => () => {\n const currentIndex = checked.indexOf(value);\n const newChecked = [...checked];\n\n if (currentIndex === -1) {\n newChecked.push(value);\n } else {\n newChecked.splice(currentIndex, 1);\n }\n\n setChecked(newChecked);\n };\n\n return (\n <List dense className={classes.root}>\n {[0, 1, 2, 3].map((value) => {\n const labelId = `checkbox-list-secondary-label-${value}`;\n return (\n <ListItem key={value} button>\n <ListItemAvatar>\n <Avatar\n alt={`Avatar n\xb0${value + 1}`}\n src={`/material-ui-static/images/avatar/${value + 1}.jpg`}\n />\n </ListItemAvatar>\n <ListItemText id={labelId} primary={`Line item ${value + 1}`} />\n <ListItemSecondaryAction>\n <Checkbox\n edge=\"end\"\n onChange={handleToggle(value)}\n checked={checked.indexOf(value) !== -1}\n inputProps={{ 'aria-labelledby': labelId }}\n />\n </ListItemSecondaryAction>\n </ListItem>\n );\n })}\n </List>\n );\n}\n"},2041:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return I}));var a=n(0),i=n.n(a),s=n(1072),r=n(1033),c=n(1034),o=n(1112),l=n(1113),m=n(1103),d=n(1107),u=n(1095),h=n(2042),b=n.n(h),p=n(2043),j=n.n(p),x=n(1);const f=Object(s.a)((e=>({root:{width:"100%",maxWidth:360,backgroundColor:e.palette.background.paper}})));function I(){const e=f(),[t,n]=i.a.useState(["wifi"]),a=e=>()=>{const a=t.indexOf(e),i=[...t];-1===a?i.push(e):i.splice(a,1),n(i)};return Object(x.jsxs)(r.a,{subheader:Object(x.jsx)(d.a,{children:"Settings"}),className:e.root,children:[Object(x.jsxs)(c.a,{children:[Object(x.jsx)(o.a,{children:Object(x.jsx)(b.a,{})}),Object(x.jsx)(m.a,{id:"switch-list-label-wifi",primary:"Wi-Fi"}),Object(x.jsx)(l.a,{children:Object(x.jsx)(u.a,{edge:"end",onChange:a("wifi"),checked:-1!==t.indexOf("wifi"),inputProps:{"aria-labelledby":"switch-list-label-wifi"}})})]}),Object(x.jsxs)(c.a,{children:[Object(x.jsx)(o.a,{children:Object(x.jsx)(j.a,{})}),Object(x.jsx)(m.a,{id:"switch-list-label-bluetooth",primary:"Bluetooth"}),Object(x.jsx)(l.a,{children:Object(x.jsx)(u.a,{edge:"end",onChange:a("bluetooth"),checked:-1!==t.indexOf("bluetooth"),inputProps:{"aria-labelledby":"switch-list-label-bluetooth"}})})]})]})}},2042:function(e,t,n){"use strict";var a=n(552),i=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var s=i(n(0)),r=(0,a(n(1128)).default)(s.createElement("path",{d:"M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"}),"Wifi");t.default=r},2043:function(e,t,n){"use strict";var a=n(552),i=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var s=i(n(0)),r=(0,a(n(1128)).default)(s.createElement("path",{d:"M17.71 7.71L12 2h-1v7.59L6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 11 14.41V22h1l5.71-5.71-4.3-4.29 4.3-4.29zM13 5.83l1.88 1.88L13 9.59V5.83zm1.88 10.46L13 18.17v-3.76l1.88 1.88z"}),"Bluetooth");t.default=r},2044:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport ListSubheader from '@material-ui/core/ListSubheader';\nimport Switch from '@material-ui/core/Switch';\nimport WifiIcon from '@material-ui/icons/Wifi';\nimport BluetoothIcon from '@material-ui/icons/Bluetooth';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n maxWidth: 360,\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\nexport default function SwitchListSecondary() {\n const classes = useStyles();\n const [checked, setChecked] = React.useState(['wifi']);\n\n const handleToggle = (value) => () => {\n const currentIndex = checked.indexOf(value);\n const newChecked = [...checked];\n\n if (currentIndex === -1) {\n newChecked.push(value);\n } else {\n newChecked.splice(currentIndex, 1);\n }\n\n setChecked(newChecked);\n };\n\n return (\n <List subheader={<ListSubheader>Settings</ListSubheader>} className={classes.root}>\n <ListItem>\n <ListItemIcon>\n <WifiIcon />\n </ListItemIcon>\n <ListItemText id=\"switch-list-label-wifi\" primary=\"Wi-Fi\" />\n <ListItemSecondaryAction>\n <Switch\n edge=\"end\"\n onChange={handleToggle('wifi')}\n checked={checked.indexOf('wifi') !== -1}\n inputProps={{ 'aria-labelledby': 'switch-list-label-wifi' }}\n />\n </ListItemSecondaryAction>\n </ListItem>\n <ListItem>\n <ListItemIcon>\n <BluetoothIcon />\n </ListItemIcon>\n <ListItemText id=\"switch-list-label-bluetooth\" primary=\"Bluetooth\" />\n <ListItemSecondaryAction>\n <Switch\n edge=\"end\"\n onChange={handleToggle('bluetooth')}\n checked={checked.indexOf('bluetooth') !== -1}\n inputProps={{ 'aria-labelledby': 'switch-list-label-bluetooth' }}\n />\n </ListItemSecondaryAction>\n </ListItem>\n </List>\n );\n}\n"},2045:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return m}));n(0);var a=n(1072),i=n(1033),s=n(1034),r=n(1103),c=n(1107),o=n(1);const l=Object(a.a)((e=>({root:{width:"100%",maxWidth:360,backgroundColor:e.palette.background.paper,position:"relative",overflow:"auto",maxHeight:300},listSection:{backgroundColor:"inherit"},ul:{backgroundColor:"inherit",padding:0}})));function m(){const e=l();return Object(o.jsx)(i.a,{className:e.root,subheader:Object(o.jsx)("li",{}),children:[0,1,2,3,4].map((t=>Object(o.jsx)("li",{className:e.listSection,children:Object(o.jsxs)("ul",{className:e.ul,children:[Object(o.jsx)(c.a,{children:"I'm sticky ".concat(t)}),[0,1,2].map((e=>Object(o.jsx)(s.a,{children:Object(o.jsx)(r.a,{primary:"Item ".concat(e)})},"item-".concat(t,"-").concat(e))))]})},"section-".concat(t))))})}},2046:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport ListSubheader from '@material-ui/core/ListSubheader';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n maxWidth: 360,\n backgroundColor: theme.palette.background.paper,\n position: 'relative',\n overflow: 'auto',\n maxHeight: 300,\n },\n listSection: {\n backgroundColor: 'inherit',\n },\n ul: {\n backgroundColor: 'inherit',\n padding: 0,\n },\n}));\n\nexport default function PinnedSubheaderList() {\n const classes = useStyles();\n\n return (\n <List className={classes.root} subheader={<li />}>\n {[0, 1, 2, 3, 4].map((sectionId) => (\n <li key={`section-${sectionId}`} className={classes.listSection}>\n <ul className={classes.ul}>\n <ListSubheader>{`I'm sticky ${sectionId}`}</ListSubheader>\n {[0, 1, 2].map((item) => (\n <ListItem key={`item-${sectionId}-${item}`}>\n <ListItemText primary={`Item ${item}`} />\n </ListItem>\n ))}\n </ul>\n </li>\n ))}\n </List>\n );\n}\n"},2047:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return u}));n(0);var a=n(1072),i=n(1033),s=n(1034),r=n(1112),c=n(1103),o=n(2048),l=n.n(o),m=n(1);const d=Object(a.a)((e=>({root:{width:"100%",maxWidth:360,backgroundColor:e.palette.background.paper}})));function u(){const e=d();return Object(m.jsxs)(i.a,{component:"nav",className:e.root,"aria-label":"contacts",children:[Object(m.jsxs)(s.a,{button:!0,children:[Object(m.jsx)(r.a,{children:Object(m.jsx)(l.a,{})}),Object(m.jsx)(c.a,{primary:"Chelsea Otakan"})]}),Object(m.jsx)(s.a,{button:!0,children:Object(m.jsx)(c.a,{inset:!0,primary:"Eric Hoffman"})})]})}},2048:function(e,t,n){"use strict";var a=n(552),i=n(1127);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var s=i(n(0)),r=(0,a(n(1128)).default)(s.createElement("path",{d:"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"}),"Star");t.default=r},2049:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport StarIcon from '@material-ui/icons/Star';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n maxWidth: 360,\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\nexport default function InsetList() {\n const classes = useStyles();\n\n return (\n <List component=\"nav\" className={classes.root} aria-label=\"contacts\">\n <ListItem button>\n <ListItemIcon>\n <StarIcon />\n </ListItemIcon>\n <ListItemText primary=\"Chelsea Otakan\" />\n </ListItem>\n <ListItem button>\n <ListItemText inset primary=\"Eric Hoffman\" />\n </ListItem>\n </List>\n );\n}\n"},2050:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return m}));n(0);var a=n(1072),i=n(1034),s=n(1103),r=n(1436),c=n(1);const o=Object(a.a)((e=>({root:{width:"100%",height:400,maxWidth:300,backgroundColor:e.palette.background.paper}})));function l(e){const{index:t,style:n}=e;return Object(c.jsx)(i.a,{button:!0,style:n,children:Object(c.jsx)(s.a,{primary:"Item ".concat(t+1)})},t)}function m(){const e=o();return Object(c.jsx)("div",{className:e.root,children:Object(c.jsx)(r.a,{height:400,width:300,itemSize:46,itemCount:200,children:l})})}},2051:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport { FixedSizeList } from 'react-window';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n height: 400,\n maxWidth: 300,\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\nfunction renderRow(props) {\n const { index, style } = props;\n\n return (\n <ListItem button style={style} key={index}>\n <ListItemText primary={`Item ${index + 1}`} />\n </ListItem>\n );\n}\n\nrenderRow.propTypes = {\n index: PropTypes.number.isRequired,\n style: PropTypes.object.isRequired,\n};\n\nexport default function VirtualizedList() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <FixedSizeList height={400} width={300} itemSize={46} itemCount={200}>\n {renderRow}\n </FixedSizeList>\n </div>\n );\n}\n"},2587:function(e,t,n){"use strict";n.r(t);var a=n(1130),i=n(118),s=n(1098),r=n(1090),c=n(194),o=n(1072),l=n(1);const m=Object(o.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));t.default=function(e){return m(),Object(l.jsxs)(l.Fragment,{children:[Object(l.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(l.jsxs)(s.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/lists",target:"_blank",role:"button",children:[Object(l.jsx)(r.a,{children:"link"}),Object(l.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(l.jsx)(c.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Lists"}),Object(l.jsx)(c.a,{className:"description",children:"Lists are continuous, vertical indexes of text or images."}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:[Object(l.jsx)("a",{href:"https://material.io/design/components/lists.html",children:"Lists"})," are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text."]}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Simple List"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2024).default,raw:n(2025)})}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:"The last item of the previous demo shows how you can render a link:"}),Object(l.jsx)(i.a,{component:"pre",className:"language-jsx",children:' \nfunction ListItemLink(props) {\n return <ListItem button component="a" {...props} />;\n}\n\n//...\n\n<ListItemLink href="#simple-list">\n <ListItemText primary="Spam" />\n</ListItemLink>\n'}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["You can find a"," ",Object(l.jsx)("a",{href:"/guides/composition/#react-router",children:"demo with React Router following this section"})," ","of the documentation."]}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Nested List"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2026).default,raw:n(2027)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Folder List"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2028).default,raw:n(2029)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Interactive"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:"Below is an interactive demo that lets you explore the visual results of the different settings:"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2030).default,raw:n(2031)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Selected ListItem"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2032).default,raw:n(2033)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Align list items"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["You should change the list item alignment when displaying 3 lines or more, set the"," ",Object(l.jsx)("code",{children:'alignItems="flex-start"'})," property."]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2034).default,raw:n(2035)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"List Controls"}),Object(l.jsx)(c.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Checkbox"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:"A checkbox can either be a primary action or a secondary action."}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:"The checkbox is the primary action and the state indicator for the list item. The comment button is a secondary action and a separate target."}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2036).default,raw:n(2038)})}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:"The checkbox is the secondary action for the list item and a separate target."}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2039).default,raw:n(2040)})}),Object(l.jsx)(c.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Switch"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:"The switch is the secondary action and a separate target."}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2041).default,raw:n(2044)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Pinned Subheader List"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:"Upon scrolling, subheaders remain pinned to the top of the screen until pushed off screen by the next subheader."}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["This feature relies on CSS sticky positioning. Unfortunately it's"," ",Object(l.jsx)("a",{href:"https://caniuse.com/#search=sticky",children:"not implemented"})," by all the supported browsers. It defaults to ",Object(l.jsx)("code",{children:"disableSticky"})," when not supported."]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2045).default,raw:n(2046)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Inset List"}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2047).default,raw:n(2049)})}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Virtualized List"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["In the following example, we demonstrate how to use"," ",Object(l.jsx)("a",{href:"https://github.com/bvaughn/react-window",children:"react-window"})," with the"," ",Object(l.jsx)("code",{children:"List"})," component. It renders 200 rows and can easily handle more. Virtualization helps with performance issues."]}),Object(l.jsx)(c.a,{className:"mb-16",component:"div",children:Object(l.jsx)(a.a,{className:"my-24",iframe:!1,component:n(2050).default,raw:n(2051)})}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:[" ","The use of ",Object(l.jsx)("a",{href:"https://github.com/bvaughn/react-window",children:"react-window"})," when possible is encouraged. If this library doesn't cover your use case, you should consider using"," ",Object(l.jsx)("a",{href:"https://github.com/bvaughn/react-virtualized",children:"react-virtualized"}),", then alternatives like ",Object(l.jsx)("a",{href:"https://github.com/petyosi/react-virtuoso",children:"react-virtuoso"}),"."]}),Object(l.jsx)(c.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Customization"}),Object(l.jsxs)(c.a,{className:"mb-16",component:"div",children:["\ud83c\udfa8 If you are looking for inspiration, you can check"," ",Object(l.jsx)("a",{href:"https://mui-treasury.com/styles/list-item",children:"MUI Treasury's customization examples"}),"."]})]})}}}]);
Zerion Mini Shell 1.0