Current File : /home/opti/public_html/ezone-accounting.optisoft.com.ng/static/js/71.dd091542.chunk.js
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[71],{1130:function(e,t,n){"use strict";n.d(t,"a",(function(){return S}));var a=n(118),r=n(1100),o=n(1109),i=n(1090),s=n(1117),c=n(1119),l=n(5),d=n(0),m=n(1024),p=n(551),h=n(1087),u=n(1099),j=n(11),b=n(370),f=n(371),x=n(1131),y=n.n(x),g=n(1);const O=Object(m.a)({productionPrefix:"iframe-"});class C extends d.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(b.a)({...Object(p.a)(),plugins:[...Object(p.a)().plugins,Object(f.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(g.jsxs)(g.Fragment,{children:[Object(g.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(g.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:t,theme:n}=this.props;return Object(g.jsx)(y.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(g.jsx)(h.b,{jss:this.state.jss,generateClassName:O,sheetsManager:this.state.sheetsManager,children:Object(g.jsx)(u.a,{theme:n,children:Object(d.cloneElement)(e,{container:this.state.container})})}):null})}}var v=Object(j.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(C);function N(e){const[t,n]=Object(d.useState)(e.currentTabIndex),{component:m,raw:p,iframe:h,className:u}=e;return Object(g.jsxs)(o.a,{className:Object(l.a)(u,"shadow"),children:[Object(g.jsx)(r.a,{position:"static",color:"default",className:"shadow-0",children:Object(g.jsxs)(c.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:t,onChange:function(e,t){n(t)},children:[m&&Object(g.jsx)(s.a,{classes:{root:"min-w-64"},icon:Object(g.jsx)(i.a,{children:"remove_red_eye"})}),p&&Object(g.jsx)(s.a,{classes:{root:"min-w-64"},icon:Object(g.jsx)(i.a,{children:"code"})})]})}),Object(g.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(g.jsx)("div",{className:0===t?"flex flex-1 max-w-full":"hidden",children:m&&(h?Object(g.jsx)(v,{children:Object(g.jsx)(m,{})}):Object(g.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(g.jsx)(m,{})}))}),Object(g.jsx)("div",{className:1===t?"flex flex-1":"hidden",children:p&&Object(g.jsx)("div",{className:"flex flex-1",children:Object(g.jsx)(a.a,{component:"pre",className:"language-javascript w-full",children:p.default})})})]})]})}N.defaultProps={currentTabIndex:0};var S=N},1862:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return m}));n(0);var a=n(1072),r=n(1109),o=n(1311),i=n(1116),s=n(1098),c=n(194),l=n(1);const d=Object(a.a)({root:{minWidth:275},bullet:{display:"inline-block",margin:"0 2px",transform:"scale(0.8)"},title:{fontSize:14},pos:{marginBottom:12}});function m(){const e=d(),t=Object(l.jsx)("span",{className:e.bullet,children:"\u2022"});return Object(l.jsxs)(r.a,{className:e.root,children:[Object(l.jsxs)(i.a,{children:[Object(l.jsx)(c.a,{className:e.title,color:"textSecondary",gutterBottom:!0,children:"Word of the Day"}),Object(l.jsxs)(c.a,{variant:"h5",component:"h2",children:["be",t,"nev",t,"o",t,"lent"]}),Object(l.jsx)(c.a,{className:e.pos,color:"textSecondary",children:"adjective"}),Object(l.jsxs)(c.a,{variant:"body2",component:"p",children:["well meaning and kindly.",Object(l.jsx)("br",{}),'"a benevolent smile"']})]}),Object(l.jsx)(o.a,{children:Object(l.jsx)(s.a,{size:"small",children:"Learn More"})})]})}},1863:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Card from '@material-ui/core/Card';\nimport CardActions from '@material-ui/core/CardActions';\nimport CardContent from '@material-ui/core/CardContent';\nimport Button from '@material-ui/core/Button';\nimport Typography from '@material-ui/core/Typography';\n\nconst useStyles = makeStyles({\n root: {\n minWidth: 275,\n },\n bullet: {\n display: 'inline-block',\n margin: '0 2px',\n transform: 'scale(0.8)',\n },\n title: {\n fontSize: 14,\n },\n pos: {\n marginBottom: 12,\n },\n});\n\nexport default function SimpleCard() {\n const classes = useStyles();\n const bull = <span className={classes.bullet}>\u2022</span>;\n\n return (\n <Card className={classes.root}>\n <CardContent>\n <Typography className={classes.title} color=\"textSecondary\" gutterBottom>\n Word of the Day\n </Typography>\n <Typography variant=\"h5\" component=\"h2\">\n be{bull}nev{bull}o{bull}lent\n </Typography>\n <Typography className={classes.pos} color=\"textSecondary\">\n adjective\n </Typography>\n <Typography variant=\"body2\" component=\"p\">\n well meaning and kindly.\n <br />\n {'\"a benevolent smile\"'}\n </Typography>\n </CardContent>\n <CardActions>\n <Button size=\"small\">Learn More</Button>\n </CardActions>\n </Card>\n );\n}\n"},1864:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return m}));n(0);var a=n(1072),r=n(1109),o=n(1311),i=n(1116),s=n(1098),c=n(194),l=n(1);const d=Object(a.a)({root:{minWidth:275},bullet:{display:"inline-block",margin:"0 2px",transform:"scale(0.8)"},title:{fontSize:14},pos:{marginBottom:12}});function m(){const e=d(),t=Object(l.jsx)("span",{className:e.bullet,children:"\u2022"});return Object(l.jsxs)(r.a,{className:e.root,variant:"outlined",children:[Object(l.jsxs)(i.a,{children:[Object(l.jsx)(c.a,{className:e.title,color:"textSecondary",gutterBottom:!0,children:"Word of the Day"}),Object(l.jsxs)(c.a,{variant:"h5",component:"h2",children:["be",t,"nev",t,"o",t,"lent"]}),Object(l.jsx)(c.a,{className:e.pos,color:"textSecondary",children:"adjective"}),Object(l.jsxs)(c.a,{variant:"body2",component:"p",children:["well meaning and kindly.",Object(l.jsx)("br",{}),'"a benevolent smile"']})]}),Object(l.jsx)(o.a,{children:Object(l.jsx)(s.a,{size:"small",children:"Learn More"})})]})}},1865:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Card from '@material-ui/core/Card';\nimport CardActions from '@material-ui/core/CardActions';\nimport CardContent from '@material-ui/core/CardContent';\nimport Button from '@material-ui/core/Button';\nimport Typography from '@material-ui/core/Typography';\n\nconst useStyles = makeStyles({\n root: {\n minWidth: 275,\n },\n bullet: {\n display: 'inline-block',\n margin: '0 2px',\n transform: 'scale(0.8)',\n },\n title: {\n fontSize: 14,\n },\n pos: {\n marginBottom: 12,\n },\n});\n\nexport default function OutlinedCard() {\n const classes = useStyles();\n const bull = <span className={classes.bullet}>\u2022</span>;\n\n return (\n <Card className={classes.root} variant=\"outlined\">\n <CardContent>\n <Typography className={classes.title} color=\"textSecondary\" gutterBottom>\n Word of the Day\n </Typography>\n <Typography variant=\"h5\" component=\"h2\">\n be{bull}nev{bull}o{bull}lent\n </Typography>\n <Typography className={classes.pos} color=\"textSecondary\">\n adjective\n </Typography>\n <Typography variant=\"body2\" component=\"p\">\n well meaning and kindly.\n <br />\n {'\"a benevolent smile\"'}\n </Typography>\n </CardContent>\n <CardActions>\n <Button size=\"small\">Learn More</Button>\n </CardActions>\n </Card>\n );\n}\n"},1866:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return w}));var a=n(0),r=n.n(a),o=n(1072),i=n(5),s=n(1109),c=n(1440),l=n(2572),d=n(1116),m=n(1311),p=n(1106),h=n(1124),u=n(1028),j=n(194),b=n(180),f=n(1175),x=n.n(f),y=n(1867),g=n.n(y),O=n(1173),C=n.n(O),v=n(1234),N=n.n(v),S=n(1);const k=Object(o.a)((e=>({root:{maxWidth:345},media:{height:0,paddingTop:"56.25%"},expand:{transform:"rotate(0deg)",marginLeft:"auto",transition:e.transitions.create("transform",{duration:e.transitions.duration.shortest})},expandOpen:{transform:"rotate(180deg)"},avatar:{backgroundColor:b.a[500]}})));function w(){const e=k(),[t,n]=r.a.useState(!1);return Object(S.jsxs)(s.a,{className:e.root,children:[Object(S.jsx)(c.a,{avatar:Object(S.jsx)(h.a,{"aria-label":"recipe",className:e.avatar,children:"R"}),action:Object(S.jsx)(u.a,{"aria-label":"settings",children:Object(S.jsx)(N.a,{})}),title:"Shrimp and Chorizo Paella",subheader:"September 14, 2016"}),Object(S.jsx)(l.a,{className:e.media,image:"/material-ui-static/images/cards/paella.jpg",title:"Paella dish"}),Object(S.jsx)(d.a,{children:Object(S.jsx)(j.a,{variant:"body2",color:"textSecondary",component:"p",children:"This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like."})}),Object(S.jsxs)(m.a,{disableSpacing:!0,children:[Object(S.jsx)(u.a,{"aria-label":"add to favorites",children:Object(S.jsx)(x.a,{})}),Object(S.jsx)(u.a,{"aria-label":"share",children:Object(S.jsx)(g.a,{})}),Object(S.jsx)(u.a,{className:Object(i.a)(e.expand,{[e.expandOpen]:t}),onClick:()=>{n(!t)},"aria-expanded":t,"aria-label":"show more",children:Object(S.jsx)(C.a,{})})]}),Object(S.jsx)(p.a,{in:t,timeout:"auto",unmountOnExit:!0,children:Object(S.jsxs)(d.a,{children:[Object(S.jsx)(j.a,{paragraph:!0,children:"Method:"}),Object(S.jsx)(j.a,{paragraph:!0,children:"Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10 minutes."}),Object(S.jsx)(j.a,{paragraph:!0,children:"Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving chicken and chorizo in the pan. Add piment\xf3n, bay leaves, garlic, tomatoes, onion, salt and pepper, and cook, stirring often until thickened and fragrant, about 10 minutes. Add saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil."}),Object(S.jsx)(j.a,{paragraph:!0,children:"Add rice and stir very gently to distribute. Top with artichokes and peppers, and cook without stirring, until most of the liquid is absorbed, 15 to 18 minutes. Reduce heat to medium-low, add reserved shrimp and mussels, tucking them down into the rice, and cook again without stirring, until mussels have opened and rice is just tender, 5 to 7 minutes more. (Discard any mussels that don\u2019t open.)"}),Object(S.jsx)(j.a,{children:"Set aside off of the heat to let rest for 10 minutes, and then serve."})]})})]})}},1868:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport clsx from 'clsx';\nimport Card from '@material-ui/core/Card';\nimport CardHeader from '@material-ui/core/CardHeader';\nimport CardMedia from '@material-ui/core/CardMedia';\nimport CardContent from '@material-ui/core/CardContent';\nimport CardActions from '@material-ui/core/CardActions';\nimport Collapse from '@material-ui/core/Collapse';\nimport Avatar from '@material-ui/core/Avatar';\nimport IconButton from '@material-ui/core/IconButton';\nimport Typography from '@material-ui/core/Typography';\nimport { red } from '@material-ui/core/colors';\nimport FavoriteIcon from '@material-ui/icons/Favorite';\nimport ShareIcon from '@material-ui/icons/Share';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport MoreVertIcon from '@material-ui/icons/MoreVert';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n maxWidth: 345,\n },\n media: {\n height: 0,\n paddingTop: '56.25%', // 16:9\n },\n expand: {\n transform: 'rotate(0deg)',\n marginLeft: 'auto',\n transition: theme.transitions.create('transform', {\n duration: theme.transitions.duration.shortest,\n }),\n },\n expandOpen: {\n transform: 'rotate(180deg)',\n },\n avatar: {\n backgroundColor: red[500],\n },\n}));\n\nexport default function RecipeReviewCard() {\n const classes = useStyles();\n const [expanded, setExpanded] = React.useState(false);\n\n const handleExpandClick = () => {\n setExpanded(!expanded);\n };\n\n return (\n <Card className={classes.root}>\n <CardHeader\n avatar={\n <Avatar aria-label=\"recipe\" className={classes.avatar}>\n R\n </Avatar>\n }\n action={\n <IconButton aria-label=\"settings\">\n <MoreVertIcon />\n </IconButton>\n }\n title=\"Shrimp and Chorizo Paella\"\n subheader=\"September 14, 2016\"\n />\n <CardMedia\n className={classes.media}\n image=\"/material-ui-static/images/cards/paella.jpg\"\n title=\"Paella dish\"\n />\n <CardContent>\n <Typography variant=\"body2\" color=\"textSecondary\" component=\"p\">\n This impressive paella is a perfect party dish and a fun meal to cook together with your\n guests. Add 1 cup of frozen peas along with the mussels, if you like.\n </Typography>\n </CardContent>\n <CardActions disableSpacing>\n <IconButton aria-label=\"add to favorites\">\n <FavoriteIcon />\n </IconButton>\n <IconButton aria-label=\"share\">\n <ShareIcon />\n </IconButton>\n <IconButton\n className={clsx(classes.expand, {\n [classes.expandOpen]: expanded,\n })}\n onClick={handleExpandClick}\n aria-expanded={expanded}\n aria-label=\"show more\"\n >\n <ExpandMoreIcon />\n </IconButton>\n </CardActions>\n <Collapse in={expanded} timeout=\"auto\" unmountOnExit>\n <CardContent>\n <Typography paragraph>Method:</Typography>\n <Typography paragraph>\n Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10\n minutes.\n </Typography>\n <Typography paragraph>\n Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high\n heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly\n browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving chicken\n and chorizo in the pan. Add piment\xf3n, bay leaves, garlic, tomatoes, onion, salt and\n pepper, and cook, stirring often until thickened and fragrant, about 10 minutes. Add\n saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.\n </Typography>\n <Typography paragraph>\n Add rice and stir very gently to distribute. Top with artichokes and peppers, and cook\n without stirring, until most of the liquid is absorbed, 15 to 18 minutes. Reduce heat to\n medium-low, add reserved shrimp and mussels, tucking them down into the rice, and cook\n again without stirring, until mussels have opened and rice is just tender, 5 to 7\n minutes more. (Discard any mussels that don\u2019t open.)\n </Typography>\n <Typography>\n Set aside off of the heat to let rest for 10 minutes, and then serve.\n </Typography>\n </CardContent>\n </Collapse>\n </Card>\n );\n}\n"},1869:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return h}));n(0);var a=n(1072),r=n(1109),o=n(2573),i=n(1311),s=n(1116),c=n(2572),l=n(1098),d=n(194),m=n(1);const p=Object(a.a)({root:{maxWidth:345},media:{height:140}});function h(){const e=p();return Object(m.jsxs)(r.a,{className:e.root,children:[Object(m.jsxs)(o.a,{children:[Object(m.jsx)(c.a,{className:e.media,image:"/material-ui-static/images/cards/contemplative-reptile.jpg",title:"Contemplative Reptile"}),Object(m.jsxs)(s.a,{children:[Object(m.jsx)(d.a,{gutterBottom:!0,variant:"h5",component:"h2",children:"Lizard"}),Object(m.jsx)(d.a,{variant:"body2",color:"textSecondary",component:"p",children:"Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica"})]})]}),Object(m.jsxs)(i.a,{children:[Object(m.jsx)(l.a,{size:"small",color:"primary",children:"Share"}),Object(m.jsx)(l.a,{size:"small",color:"primary",children:"Learn More"})]})]})}},1870:function(e,t,n){"use strict";n.r(t),t.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Card from \'@material-ui/core/Card\';\nimport CardActionArea from \'@material-ui/core/CardActionArea\';\nimport CardActions from \'@material-ui/core/CardActions\';\nimport CardContent from \'@material-ui/core/CardContent\';\nimport CardMedia from \'@material-ui/core/CardMedia\';\nimport Button from \'@material-ui/core/Button\';\nimport Typography from \'@material-ui/core/Typography\';\n\nconst useStyles = makeStyles({\n root: {\n maxWidth: 345,\n },\n media: {\n height: 140,\n },\n});\n\nexport default function MediaCard() {\n const classes = useStyles();\n\n return (\n <Card className={classes.root}>\n <CardActionArea>\n <CardMedia\n className={classes.media}\n image="/material-ui-static/images/cards/contemplative-reptile.jpg"\n title="Contemplative Reptile"\n />\n <CardContent>\n <Typography gutterBottom variant="h5" component="h2">\n Lizard\n </Typography>\n <Typography variant="body2" color="textSecondary" component="p">\n Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging\n across all continents except Antarctica\n </Typography>\n </CardContent>\n </CardActionArea>\n <CardActions>\n <Button size="small" color="primary">\n Share\n </Button>\n <Button size="small" color="primary">\n Learn More\n </Button>\n </CardActions>\n </Card>\n );\n}\n'},1871:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return h}));n(0);var a=n(1072),r=n(1109),o=n(2573),i=n(1311),s=n(1116),c=n(2572),l=n(1098),d=n(194),m=n(1);const p=Object(a.a)({root:{maxWidth:345}});function h(){const e=p();return Object(m.jsxs)(r.a,{className:e.root,children:[Object(m.jsxs)(o.a,{children:[Object(m.jsx)(c.a,{component:"img",alt:"Contemplative Reptile",height:"140",image:"/material-ui-static/images/cards/contemplative-reptile.jpg",title:"Contemplative Reptile"}),Object(m.jsxs)(s.a,{children:[Object(m.jsx)(d.a,{gutterBottom:!0,variant:"h5",component:"h2",children:"Lizard"}),Object(m.jsx)(d.a,{variant:"body2",color:"textSecondary",component:"p",children:"Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica"})]})]}),Object(m.jsxs)(i.a,{children:[Object(m.jsx)(l.a,{size:"small",color:"primary",children:"Share"}),Object(m.jsx)(l.a,{size:"small",color:"primary",children:"Learn More"})]})]})}},1872:function(e,t,n){"use strict";n.r(t),t.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Card from \'@material-ui/core/Card\';\nimport CardActionArea from \'@material-ui/core/CardActionArea\';\nimport CardActions from \'@material-ui/core/CardActions\';\nimport CardContent from \'@material-ui/core/CardContent\';\nimport CardMedia from \'@material-ui/core/CardMedia\';\nimport Button from \'@material-ui/core/Button\';\nimport Typography from \'@material-ui/core/Typography\';\n\nconst useStyles = makeStyles({\n root: {\n maxWidth: 345,\n },\n});\n\nexport default function ImgMediaCard() {\n const classes = useStyles();\n\n return (\n <Card className={classes.root}>\n <CardActionArea>\n <CardMedia\n component="img"\n alt="Contemplative Reptile"\n height="140"\n image="/material-ui-static/images/cards/contemplative-reptile.jpg"\n title="Contemplative Reptile"\n />\n <CardContent>\n <Typography gutterBottom variant="h5" component="h2">\n Lizard\n </Typography>\n <Typography variant="body2" color="textSecondary" component="p">\n Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging\n across all continents except Antarctica\n </Typography>\n </CardContent>\n </CardActionArea>\n <CardActions>\n <Button size="small" color="primary">\n Share\n </Button>\n <Button size="small" color="primary">\n Learn More\n </Button>\n </CardActions>\n </Card>\n );\n}\n'},1873:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return x}));n(0);var a=n(1072),r=n(43),o=n(1109),i=n(1116),s=n(2572),c=n(1028),l=n(194),d=n(1875),m=n.n(d),p=n(1876),h=n.n(p),u=n(1874),j=n.n(u),b=n(1);const f=Object(a.a)((e=>({root:{display:"flex"},details:{display:"flex",flexDirection:"column"},content:{flex:"1 0 auto"},cover:{width:151},controls:{display:"flex",alignItems:"center",paddingLeft:e.spacing(1),paddingBottom:e.spacing(1)},playIcon:{height:38,width:38}})));function x(){const e=f(),t=Object(r.a)();return Object(b.jsxs)(o.a,{className:e.root,children:[Object(b.jsxs)("div",{className:e.details,children:[Object(b.jsxs)(i.a,{className:e.content,children:[Object(b.jsx)(l.a,{component:"h5",variant:"h5",children:"Live From Space"}),Object(b.jsx)(l.a,{variant:"subtitle1",color:"textSecondary",children:"Mac Miller"})]}),Object(b.jsxs)("div",{className:e.controls,children:[Object(b.jsx)(c.a,{"aria-label":"previous",children:"rtl"===t.direction?Object(b.jsx)(j.a,{}):Object(b.jsx)(m.a,{})}),Object(b.jsx)(c.a,{"aria-label":"play/pause",children:Object(b.jsx)(h.a,{className:e.playIcon})}),Object(b.jsx)(c.a,{"aria-label":"next",children:"rtl"===t.direction?Object(b.jsx)(m.a,{}):Object(b.jsx)(j.a,{})})]})]}),Object(b.jsx)(s.a,{className:e.cover,image:"/material-ui-static/images/cards/live-from-space.jpg",title:"Live from space album cover"})]})}},1877:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport Card from '@material-ui/core/Card';\nimport CardContent from '@material-ui/core/CardContent';\nimport CardMedia from '@material-ui/core/CardMedia';\nimport IconButton from '@material-ui/core/IconButton';\nimport Typography from '@material-ui/core/Typography';\nimport SkipPreviousIcon from '@material-ui/icons/SkipPrevious';\nimport PlayArrowIcon from '@material-ui/icons/PlayArrow';\nimport SkipNextIcon from '@material-ui/icons/SkipNext';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n },\n details: {\n display: 'flex',\n flexDirection: 'column',\n },\n content: {\n flex: '1 0 auto',\n },\n cover: {\n width: 151,\n },\n controls: {\n display: 'flex',\n alignItems: 'center',\n paddingLeft: theme.spacing(1),\n paddingBottom: theme.spacing(1),\n },\n playIcon: {\n height: 38,\n width: 38,\n },\n}));\n\nexport default function MediaControlCard() {\n const classes = useStyles();\n const theme = useTheme();\n\n return (\n <Card className={classes.root}>\n <div className={classes.details}>\n <CardContent className={classes.content}>\n <Typography component=\"h5\" variant=\"h5\">\n Live From Space\n </Typography>\n <Typography variant=\"subtitle1\" color=\"textSecondary\">\n Mac Miller\n </Typography>\n </CardContent>\n <div className={classes.controls}>\n <IconButton aria-label=\"previous\">\n {theme.direction === 'rtl' ? <SkipNextIcon /> : <SkipPreviousIcon />}\n </IconButton>\n <IconButton aria-label=\"play/pause\">\n <PlayArrowIcon className={classes.playIcon} />\n </IconButton>\n <IconButton aria-label=\"next\">\n {theme.direction === 'rtl' ? <SkipPreviousIcon /> : <SkipNextIcon />}\n </IconButton>\n </div>\n </div>\n <CardMedia\n className={classes.cover}\n image=\"/material-ui-static/images/cards/live-from-space.jpg\"\n title=\"Live from space album cover\"\n />\n </Card>\n );\n}\n"},2571:function(e,t,n){"use strict";n.r(t);var a=n(1130),r=n(1098),o=n(1090),i=n(194),s=n(1072),c=n(1);const l=Object(s.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));t.default=function(e){return l(),Object(c.jsxs)(c.Fragment,{children:[Object(c.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(c.jsxs)(r.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/cards",target:"_blank",role:"button",children:[Object(c.jsx)(o.a,{children:"link"}),Object(c.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(c.jsx)(i.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Card"}),Object(c.jsx)(i.a,{className:"description",children:"Cards contain content and actions about a single subject."}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:[Object(c.jsx)("a",{href:"https://material.io/design/components/cards.html",children:"Cards"})," are surfaces that display content and actions on a single topic."]}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:"They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy."}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Simple Card"}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:"Although cards can support multiple actions, UI controls, and an overflow menu, use restraint and remember that cards are entry points to more complex and detailed information."}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1862).default,raw:n(1863)})}),Object(c.jsx)(i.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Outlined Card"}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["Set ",Object(c.jsx)("code",{children:'variant="outlined"'})," to render an outlined card."]}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1864).default,raw:n(1865)})}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Complex Interaction"}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:"On desktop, card content can expand. (Click the downward chevron to view the recipe.)"}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1866).default,raw:n(1868)})}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Media"}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:"Example of a card using an image to reinforce the content."}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1869).default,raw:n(1870)})}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["By default, we use the combination of a ",Object(c.jsx)("code",{children:"<div>"})," element and a"," ",Object(c.jsx)("em",{children:"background image"})," to display the media. It can be problematic in some situations. For instance, you might want to display a video or a responsive image. Use the"," ",Object(c.jsx)("code",{children:"component"})," property for these use cases:"]}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1871).default,raw:n(1872)})}),Object(c.jsx)("blockquote",{children:Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["\u26a0\ufe0f When ",Object(c.jsx)("code",{children:'component="img"'}),", CardMedia relies on ",Object(c.jsx)("code",{children:"object-fit"})," for centering the image. It's not supported by IE 11."]})}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"UI Controls"}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:"Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card."}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:"Here's an example of a media control card."}),Object(c.jsx)(i.a,{className:"mb-16",component:"div",children:Object(c.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1873).default,raw:n(1877)})}),Object(c.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Customization"}),Object(c.jsxs)(i.a,{className:"mb-16",component:"div",children:["\ud83c\udfa8 If you are looking for inspiration, you can check"," ",Object(c.jsx)("a",{href:"https://mui-treasury.com/components/card",children:"MUI Treasury's customization examples"}),"."]})]})}}}]);
Mini Shell