%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[62],{1130:function(e,n,i){"use strict";i.d(n,"a",(function(){return I}));var t=i(118),a=i(1100),r=i(1109),o=i(1090),l=i(1117),m=i(1119),c=i(5),s=i(0),j=i(1024),p=i(551),T=i(1087),d=i(1099),b=i(11),h=i(370),x=i(371),O=i(1131),u=i.n(O),f=i(1);const y=Object(j.a)({productionPrefix:"iframe-"});class C extends s.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(h.a)({...Object(p.a)(),plugins:[...Object(p.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(f.jsxs)(f.Fragment,{children:[Object(f.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(f.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:n,theme:i}=this.props;return Object(f.jsx)(u.a,{head:this.renderHead(),ref:this.handleRef,className:Object(c.a)(n.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(f.jsx)(T.b,{jss:this.state.jss,generateClassName:y,sheetsManager:this.state.sheetsManager,children:Object(f.jsx)(d.a,{theme:i,children:Object(s.cloneElement)(e,{container:this.state.container})})}):null})}}var S=Object(b.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(C);function g(e){const[n,i]=Object(s.useState)(e.currentTabIndex),{component:j,raw:p,iframe:T,className:d}=e;return Object(f.jsxs)(r.a,{className:Object(c.a)(d,"shadow"),children:[Object(f.jsx)(a.a,{position:"static",color:"default",className:"shadow-0",children:Object(f.jsxs)(m.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:n,onChange:function(e,n){i(n)},children:[j&&Object(f.jsx)(l.a,{classes:{root:"min-w-64"},icon:Object(f.jsx)(o.a,{children:"remove_red_eye"})}),p&&Object(f.jsx)(l.a,{classes:{root:"min-w-64"},icon:Object(f.jsx)(o.a,{children:"code"})})]})}),Object(f.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(f.jsx)("div",{className:0===n?"flex flex-1 max-w-full":"hidden",children:j&&(T?Object(f.jsx)(S,{children:Object(f.jsx)(j,{})}):Object(f.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(f.jsx)(j,{})}))}),Object(f.jsx)("div",{className:1===n?"flex flex-1":"hidden",children:p&&Object(f.jsx)("div",{className:"flex flex-1",children:Object(f.jsx)(t.a,{component:"pre",className:"language-javascript w-full",children:p.default})})})]})]})}g.defaultProps={currentTabIndex:0};var I=g},2389:function(e,n,i){"use strict";i.r(n),i.d(n,"default",(function(){return s}));i(0);var t=i(2618),a=i(2619),r=i(2620),o=i(2622),l=i(2623),m=i(2621),c=i(1);function s(){return Object(c.jsxs)(t.a,{children:[Object(c.jsxs)(a.a,{children:[Object(c.jsxs)(r.a,{children:[Object(c.jsx)(m.a,{}),Object(c.jsx)(o.a,{})]}),Object(c.jsx)(l.a,{children:"Eat"})]}),Object(c.jsxs)(a.a,{children:[Object(c.jsxs)(r.a,{children:[Object(c.jsx)(m.a,{}),Object(c.jsx)(o.a,{})]}),Object(c.jsx)(l.a,{children:"Code"})]}),Object(c.jsxs)(a.a,{children:[Object(c.jsx)(r.a,{children:Object(c.jsx)(m.a,{})}),Object(c.jsx)(l.a,{children:"Sleep"})]})]})}},2390:function(e,n,i){"use strict";i.r(n),n.default="import React from 'react';\nimport Timeline from '@material-ui/lab/Timeline';\nimport TimelineItem from '@material-ui/lab/TimelineItem';\nimport TimelineSeparator from '@material-ui/lab/TimelineSeparator';\nimport TimelineConnector from '@material-ui/lab/TimelineConnector';\nimport TimelineContent from '@material-ui/lab/TimelineContent';\nimport TimelineDot from '@material-ui/lab/TimelineDot';\n\nexport default function BasicTimeline() {\n return (\n <Timeline>\n <TimelineItem>\n <TimelineSeparator>\n <TimelineDot />\n <TimelineConnector />\n </TimelineSeparator>\n <TimelineContent>Eat</TimelineContent>\n </TimelineItem>\n <TimelineItem>\n <TimelineSeparator>\n <TimelineDot />\n <TimelineConnector />\n </TimelineSeparator>\n <TimelineContent>Code</TimelineContent>\n </TimelineItem>\n <TimelineItem>\n <TimelineSeparator>\n <TimelineDot />\n </TimelineSeparator>\n <TimelineContent>Sleep</TimelineContent>\n </TimelineItem>\n </Timeline>\n );\n}\n"},2391:function(e,n,i){"use strict";i.r(n),i.d(n,"default",(function(){return s}));i(0);var t=i(2618),a=i(2619),r=i(2620),o=i(2622),l=i(2623),m=i(2621),c=i(1);function s(){return Object(c.jsxs)(t.a,{align:"right",children:[Object(c.jsxs)(a.a,{children:[Object(c.jsxs)(r.a,{children:[Object(c.jsx)(m.a,{}),Object(c.jsx)(o.a,{})]}),Object(c.jsx)(l.a,{children:"Eat"})]}),Object(c.jsxs)(a.a,{children:[Object(c.jsxs)(r.a,{children:[Object(c.jsx)(m.a,{}),Object(c.jsx)(o.a,{})]}),Object(c.jsx)(l.a,{children:"Code"})]}),Object(c.jsxs)(a.a,{children:[Object(c.jsxs)(r.a,{children:[Object(c.jsx)(m.a,{}),Object(c.jsx)(o.a,{})]}),Object(c.jsx)(l.a,{children:"Sleep"})]}),Object(c.jsxs)(a.a,{children:[Object(c.jsx)(r.a,{children:Object(c.jsx)(m.a,{})}),Object(c.jsx)(l.a,{children:"Repeat"})]})]})}},2392:function(e,n,i){"use strict";i.r(n),n.default="import React from 'react';\nimport Timeline from '@material-ui/lab/Timeline';\nimport TimelineItem from '@material-ui/lab/TimelineItem';\nimport TimelineSeparator from '@material-ui/lab/TimelineSeparator';\nimport TimelineConnector from '@material-ui/lab/TimelineConnector';\nimport TimelineContent from '@material-ui/lab/TimelineContent';\nimport TimelineDot from '@material-ui/lab/TimelineDot';\n\nexport default function RightAlignedTimeline() {\n return (\n <Timeline align=\"right\">\n <TimelineItem>\n <TimelineSeparator>\n <TimelineDot />\n <TimelineConnector />\n </TimelineSeparator>\n <TimelineContent>Eat</TimelineContent>\n </TimelineItem>\n <TimelineItem>\n <TimelineSeparator>\n <TimelineDot />\n <TimelineConnector />\n </TimelineSeparator>\n <TimelineContent>Code</TimelineContent>\n </TimelineItem>\n <TimelineItem>\n <TimelineSeparator>\n <TimelineDot />\n <TimelineConnector />\n </TimelineSeparator>\n <TimelineContent>Sleep</TimelineContent>\n </TimelineItem>\n <TimelineItem>\n <TimelineSeparator>\n <TimelineDot />\n </TimelineSeparator>\n <TimelineContent>Repeat</TimelineContent>\n </TimelineItem>\n </Timeline>\n );\n}\n"},2393:function(e,n,i){"use strict";i.r(n),i.d(n,"default",(function(){return s}));i(0);var t=i(2618),a=i(2619),r=i(2620),o=i(2622),l=i(2623),m=i(2621),c=i(1);function s(){return Object(c.jsxs)(t.a,{align:"alternate",children:[Object(c.jsxs)(a.a,{children:[Object(c.jsxs)(r.a,{children:[Object(c.jsx)(m.a,{}),Object(c.jsx)(o.a,{})]}),Object(c.jsx)(l.a,{children:"Eat"})]}),Object(c.jsxs)(a.a,{children:[Object(c.jsxs)(r.a,{children:[Object(c.jsx)(m.a,{}),Object(c.jsx)(o.a,{})]}),Object(c.jsx)(l.a,{children:"Code"})]}),Object(c.jsxs)(a.a,{children:[Object(c.jsxs)(r.a,{children:[Object(c.jsx)(m.a,{}),Object(c.jsx)(o.a,{})]}),Object(c.jsx)(l.a,{children:"Sleep"})]}),Object(c.jsxs)(a.a,{children:[Object(c.jsx)(r.a,{children:Object(c.jsx)(m.a,{})}),Object(c.jsx)(l.a,{children:"Repeat"})]})]})}},2394:function(e,n,i){"use strict";i.r(n),n.default="import React from 'react';\nimport Timeline from '@material-ui/lab/Timeline';\nimport TimelineItem from '@material-ui/lab/TimelineItem';\nimport TimelineSeparator from '@material-ui/lab/TimelineSeparator';\nimport TimelineConnector from '@material-ui/lab/TimelineConnector';\nimport TimelineContent from '@material-ui/lab/TimelineContent';\nimport TimelineDot from '@material-ui/lab/TimelineDot';\n\nexport default function AlternateTimeline() {\n return (\n <Timeline align=\"alternate\">\n <TimelineItem>\n <TimelineSeparator>\n <TimelineDot />\n <TimelineConnector />\n </TimelineSeparator>\n <TimelineContent>Eat</TimelineContent>\n </TimelineItem>\n <TimelineItem>\n <TimelineSeparator>\n <TimelineDot />\n <TimelineConnector />\n </TimelineSeparator>\n <TimelineContent>Code</TimelineContent>\n </TimelineItem>\n <TimelineItem>\n <TimelineSeparator>\n <TimelineDot />\n <TimelineConnector />\n </TimelineSeparator>\n <TimelineContent>Sleep</TimelineContent>\n </TimelineItem>\n <TimelineItem>\n <TimelineSeparator>\n <TimelineDot />\n </TimelineSeparator>\n <TimelineContent>Repeat</TimelineContent>\n </TimelineItem>\n </Timeline>\n );\n}\n"},2395:function(e,n,i){"use strict";i.r(n),i.d(n,"default",(function(){return s}));i(0);var t=i(2618),a=i(2619),r=i(2620),o=i(2622),l=i(2623),m=i(2621),c=i(1);function s(){return Object(c.jsxs)(t.a,{align:"alternate",children:[Object(c.jsxs)(a.a,{children:[Object(c.jsxs)(r.a,{children:[Object(c.jsx)(m.a,{}),Object(c.jsx)(o.a,{})]}),Object(c.jsx)(l.a,{children:"Eat"})]}),Object(c.jsxs)(a.a,{children:[Object(c.jsxs)(r.a,{children:[Object(c.jsx)(m.a,{color:"primary"}),Object(c.jsx)(o.a,{})]}),Object(c.jsx)(l.a,{children:"Code"})]}),Object(c.jsxs)(a.a,{children:[Object(c.jsxs)(r.a,{children:[Object(c.jsx)(m.a,{color:"secondary"}),Object(c.jsx)(o.a,{})]}),Object(c.jsx)(l.a,{children:"Sleep"})]}),Object(c.jsxs)(a.a,{children:[Object(c.jsx)(r.a,{children:Object(c.jsx)(m.a,{})}),Object(c.jsx)(l.a,{children:"Repeat"})]})]})}},2396:function(e,n,i){"use strict";i.r(n),n.default="import React from 'react';\nimport Timeline from '@material-ui/lab/Timeline';\nimport TimelineItem from '@material-ui/lab/TimelineItem';\nimport TimelineSeparator from '@material-ui/lab/TimelineSeparator';\nimport TimelineConnector from '@material-ui/lab/TimelineConnector';\nimport TimelineContent from '@material-ui/lab/TimelineContent';\nimport TimelineDot from '@material-ui/lab/TimelineDot';\n\nexport default function ColorsTimeline() {\n return (\n <Timeline align=\"alternate\">\n <TimelineItem>\n <TimelineSeparator>\n <TimelineDot />\n <TimelineConnector />\n </TimelineSeparator>\n <TimelineContent>Eat</TimelineContent>\n </TimelineItem>\n <TimelineItem>\n <TimelineSeparator>\n <TimelineDot color=\"primary\" />\n <TimelineConnector />\n </TimelineSeparator>\n <TimelineContent>Code</TimelineContent>\n </TimelineItem>\n <TimelineItem>\n <TimelineSeparator>\n <TimelineDot color=\"secondary\" />\n <TimelineConnector />\n </TimelineSeparator>\n <TimelineContent>Sleep</TimelineContent>\n </TimelineItem>\n <TimelineItem>\n <TimelineSeparator>\n <TimelineDot />\n </TimelineSeparator>\n <TimelineContent>Repeat</TimelineContent>\n </TimelineItem>\n </Timeline>\n );\n}\n"},2397:function(e,n,i){"use strict";i.r(n),i.d(n,"default",(function(){return s}));i(0);var t=i(2618),a=i(2619),r=i(2620),o=i(2622),l=i(2623),m=i(2621),c=i(1);function s(){return Object(c.jsxs)(t.a,{align:"alternate",children:[Object(c.jsxs)(a.a,{children:[Object(c.jsxs)(r.a,{children:[Object(c.jsx)(m.a,{variant:"outlined"}),Object(c.jsx)(o.a,{})]}),Object(c.jsx)(l.a,{children:"Eat"})]}),Object(c.jsxs)(a.a,{children:[Object(c.jsxs)(r.a,{children:[Object(c.jsx)(m.a,{variant:"outlined",color:"primary"}),Object(c.jsx)(o.a,{})]}),Object(c.jsx)(l.a,{children:"Code"})]}),Object(c.jsxs)(a.a,{children:[Object(c.jsxs)(r.a,{children:[Object(c.jsx)(m.a,{variant:"outlined",color:"secondary"}),Object(c.jsx)(o.a,{})]}),Object(c.jsx)(l.a,{children:"Sleep"})]}),Object(c.jsxs)(a.a,{children:[Object(c.jsx)(r.a,{children:Object(c.jsx)(m.a,{variant:"outlined"})}),Object(c.jsx)(l.a,{children:"Repeat"})]})]})}},2398:function(e,n,i){"use strict";i.r(n),n.default="import React from 'react';\nimport Timeline from '@material-ui/lab/Timeline';\nimport TimelineItem from '@material-ui/lab/TimelineItem';\nimport TimelineSeparator from '@material-ui/lab/TimelineSeparator';\nimport TimelineConnector from '@material-ui/lab/TimelineConnector';\nimport TimelineContent from '@material-ui/lab/TimelineContent';\nimport TimelineDot from '@material-ui/lab/TimelineDot';\n\nexport default function OutlinedTimeline() {\n return (\n <Timeline align=\"alternate\">\n <TimelineItem>\n <TimelineSeparator>\n <TimelineDot variant=\"outlined\" />\n <TimelineConnector />\n </TimelineSeparator>\n <TimelineContent>Eat</TimelineContent>\n </TimelineItem>\n <TimelineItem>\n <TimelineSeparator>\n <TimelineDot variant=\"outlined\" color=\"primary\" />\n <TimelineConnector />\n </TimelineSeparator>\n <TimelineContent>Code</TimelineContent>\n </TimelineItem>\n <TimelineItem>\n <TimelineSeparator>\n <TimelineDot variant=\"outlined\" color=\"secondary\" />\n <TimelineConnector />\n </TimelineSeparator>\n <TimelineContent>Sleep</TimelineContent>\n </TimelineItem>\n <TimelineItem>\n <TimelineSeparator>\n <TimelineDot variant=\"outlined\" />\n </TimelineSeparator>\n <TimelineContent>Repeat</TimelineContent>\n </TimelineItem>\n </Timeline>\n );\n}\n"},2399:function(e,n,i){"use strict";i.r(n),i.d(n,"default",(function(){return d}));var t=i(0),a=i.n(t),r=i(2618),o=i(2619),l=i(2620),m=i(2622),c=i(2623),s=i(2621),j=i(2624),p=i(194),T=i(1);function d(){return Object(T.jsx)(a.a.Fragment,{children:Object(T.jsxs)(r.a,{align:"alternate",children:[Object(T.jsxs)(o.a,{children:[Object(T.jsx)(j.a,{children:Object(T.jsx)(p.a,{color:"textSecondary",children:"09:30 am"})}),Object(T.jsxs)(l.a,{children:[Object(T.jsx)(s.a,{}),Object(T.jsx)(m.a,{})]}),Object(T.jsx)(c.a,{children:Object(T.jsx)(p.a,{children:"Eat"})})]}),Object(T.jsxs)(o.a,{children:[Object(T.jsx)(j.a,{children:Object(T.jsx)(p.a,{color:"textSecondary",children:"10:00 am"})}),Object(T.jsxs)(l.a,{children:[Object(T.jsx)(s.a,{}),Object(T.jsx)(m.a,{})]}),Object(T.jsx)(c.a,{children:Object(T.jsx)(p.a,{children:"Code"})})]}),Object(T.jsxs)(o.a,{children:[Object(T.jsx)(j.a,{children:Object(T.jsx)(p.a,{color:"textSecondary",children:"12:00 am"})}),Object(T.jsxs)(l.a,{children:[Object(T.jsx)(s.a,{}),Object(T.jsx)(m.a,{})]}),Object(T.jsx)(c.a,{children:Object(T.jsx)(p.a,{children:"Sleep"})})]}),Object(T.jsxs)(o.a,{children:[Object(T.jsx)(j.a,{children:Object(T.jsx)(p.a,{color:"textSecondary",children:"9:00 am"})}),Object(T.jsxs)(l.a,{children:[Object(T.jsx)(s.a,{}),Object(T.jsx)(m.a,{})]}),Object(T.jsx)(c.a,{children:Object(T.jsx)(p.a,{children:"Repeat"})})]})]})})}},2400:function(e,n,i){"use strict";i.r(n),n.default="import React from 'react';\nimport Timeline from '@material-ui/lab/Timeline';\nimport TimelineItem from '@material-ui/lab/TimelineItem';\nimport TimelineSeparator from '@material-ui/lab/TimelineSeparator';\nimport TimelineConnector from '@material-ui/lab/TimelineConnector';\nimport TimelineContent from '@material-ui/lab/TimelineContent';\nimport TimelineDot from '@material-ui/lab/TimelineDot';\nimport TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';\nimport Typography from '@material-ui/core/Typography';\n\nexport default function OppositeContentTimeline() {\n return (\n <React.Fragment>\n <Timeline align=\"alternate\">\n <TimelineItem>\n <TimelineOppositeContent>\n <Typography color=\"textSecondary\">09:30 am</Typography>\n </TimelineOppositeContent>\n <TimelineSeparator>\n <TimelineDot />\n <TimelineConnector />\n </TimelineSeparator>\n <TimelineContent>\n <Typography>Eat</Typography>\n </TimelineContent>\n </TimelineItem>\n <TimelineItem>\n <TimelineOppositeContent>\n <Typography color=\"textSecondary\">10:00 am</Typography>\n </TimelineOppositeContent>\n <TimelineSeparator>\n <TimelineDot />\n <TimelineConnector />\n </TimelineSeparator>\n <TimelineContent>\n <Typography>Code</Typography>\n </TimelineContent>\n </TimelineItem>\n <TimelineItem>\n <TimelineOppositeContent>\n <Typography color=\"textSecondary\">12:00 am</Typography>\n </TimelineOppositeContent>\n <TimelineSeparator>\n <TimelineDot />\n <TimelineConnector />\n </TimelineSeparator>\n <TimelineContent>\n <Typography>Sleep</Typography>\n </TimelineContent>\n </TimelineItem>\n <TimelineItem>\n <TimelineOppositeContent>\n <Typography color=\"textSecondary\">9:00 am</Typography>\n </TimelineOppositeContent>\n <TimelineSeparator>\n <TimelineDot />\n <TimelineConnector />\n </TimelineSeparator>\n <TimelineContent>\n <Typography>Repeat</Typography>\n </TimelineContent>\n </TimelineItem>\n </Timeline>\n </React.Fragment>\n );\n}\n"},2401:function(e,n,i){"use strict";i.r(n),i.d(n,"default",(function(){return S}));i(0);var t=i(1072),a=i(2618),r=i(2619),o=i(2620),l=i(2622),m=i(2623),c=i(2624),s=i(2621),j=i(2402),p=i.n(j),T=i(2403),d=i.n(T),b=i(2404),h=i.n(b),x=i(2405),O=i.n(x),u=i(193),f=i(194),y=i(1);const C=Object(t.a)((e=>({paper:{padding:"6px 16px"},secondaryTail:{backgroundColor:e.palette.secondary.main}})));function S(){const e=C();return Object(y.jsxs)(a.a,{align:"alternate",children:[Object(y.jsxs)(r.a,{children:[Object(y.jsx)(c.a,{children:Object(y.jsx)(f.a,{variant:"body2",color:"textSecondary",children:"9:30 am"})}),Object(y.jsxs)(o.a,{children:[Object(y.jsx)(s.a,{children:Object(y.jsx)(p.a,{})}),Object(y.jsx)(l.a,{})]}),Object(y.jsx)(m.a,{children:Object(y.jsxs)(u.a,{elevation:3,className:e.paper,children:[Object(y.jsx)(f.a,{variant:"h6",component:"h1",children:"Eat"}),Object(y.jsx)(f.a,{children:"Because you need strength"})]})})]}),Object(y.jsxs)(r.a,{children:[Object(y.jsx)(c.a,{children:Object(y.jsx)(f.a,{variant:"body2",color:"textSecondary",children:"10:00 am"})}),Object(y.jsxs)(o.a,{children:[Object(y.jsx)(s.a,{color:"primary",children:Object(y.jsx)(d.a,{})}),Object(y.jsx)(l.a,{})]}),Object(y.jsx)(m.a,{children:Object(y.jsxs)(u.a,{elevation:3,className:e.paper,children:[Object(y.jsx)(f.a,{variant:"h6",component:"h1",children:"Code"}),Object(y.jsx)(f.a,{children:"Because it's awesome!"})]})})]}),Object(y.jsxs)(r.a,{children:[Object(y.jsxs)(o.a,{children:[Object(y.jsx)(s.a,{color:"primary",variant:"outlined",children:Object(y.jsx)(h.a,{})}),Object(y.jsx)(l.a,{className:e.secondaryTail})]}),Object(y.jsx)(m.a,{children:Object(y.jsxs)(u.a,{elevation:3,className:e.paper,children:[Object(y.jsx)(f.a,{variant:"h6",component:"h1",children:"Sleep"}),Object(y.jsx)(f.a,{children:"Because you need rest"})]})})]}),Object(y.jsxs)(r.a,{children:[Object(y.jsx)(o.a,{children:Object(y.jsx)(s.a,{color:"secondary",children:Object(y.jsx)(O.a,{})})}),Object(y.jsx)(m.a,{children:Object(y.jsxs)(u.a,{elevation:3,className:e.paper,children:[Object(y.jsx)(f.a,{variant:"h6",component:"h1",children:"Repeat"}),Object(y.jsx)(f.a,{children:"Because this is the life you love!"})]})})]})]})}},2406:function(e,n,i){"use strict";i.r(n),n.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Timeline from \'@material-ui/lab/Timeline\';\nimport TimelineItem from \'@material-ui/lab/TimelineItem\';\nimport TimelineSeparator from \'@material-ui/lab/TimelineSeparator\';\nimport TimelineConnector from \'@material-ui/lab/TimelineConnector\';\nimport TimelineContent from \'@material-ui/lab/TimelineContent\';\nimport TimelineOppositeContent from \'@material-ui/lab/TimelineOppositeContent\';\nimport TimelineDot from \'@material-ui/lab/TimelineDot\';\nimport FastfoodIcon from \'@material-ui/icons/Fastfood\';\nimport LaptopMacIcon from \'@material-ui/icons/LaptopMac\';\nimport HotelIcon from \'@material-ui/icons/Hotel\';\nimport RepeatIcon from \'@material-ui/icons/Repeat\';\nimport Paper from \'@material-ui/core/Paper\';\nimport Typography from \'@material-ui/core/Typography\';\n\nconst useStyles = makeStyles((theme) => ({\n paper: {\n padding: \'6px 16px\',\n },\n secondaryTail: {\n backgroundColor: theme.palette.secondary.main,\n },\n}));\n\nexport default function CustomizedTimeline() {\n const classes = useStyles();\n\n return (\n <Timeline align="alternate">\n <TimelineItem>\n <TimelineOppositeContent>\n <Typography variant="body2" color="textSecondary">\n 9:30 am\n </Typography>\n </TimelineOppositeContent>\n <TimelineSeparator>\n <TimelineDot>\n <FastfoodIcon />\n </TimelineDot>\n <TimelineConnector />\n </TimelineSeparator>\n <TimelineContent>\n <Paper elevation={3} className={classes.paper}>\n <Typography variant="h6" component="h1">\n Eat\n </Typography>\n <Typography>Because you need strength</Typography>\n </Paper>\n </TimelineContent>\n </TimelineItem>\n <TimelineItem>\n <TimelineOppositeContent>\n <Typography variant="body2" color="textSecondary">\n 10:00 am\n </Typography>\n </TimelineOppositeContent>\n <TimelineSeparator>\n <TimelineDot color="primary">\n <LaptopMacIcon />\n </TimelineDot>\n <TimelineConnector />\n </TimelineSeparator>\n <TimelineContent>\n <Paper elevation={3} className={classes.paper}>\n <Typography variant="h6" component="h1">\n Code\n </Typography>\n <Typography>Because it's awesome!</Typography>\n </Paper>\n </TimelineContent>\n </TimelineItem>\n <TimelineItem>\n <TimelineSeparator>\n <TimelineDot color="primary" variant="outlined">\n <HotelIcon />\n </TimelineDot>\n <TimelineConnector className={classes.secondaryTail} />\n </TimelineSeparator>\n <TimelineContent>\n <Paper elevation={3} className={classes.paper}>\n <Typography variant="h6" component="h1">\n Sleep\n </Typography>\n <Typography>Because you need rest</Typography>\n </Paper>\n </TimelineContent>\n </TimelineItem>\n <TimelineItem>\n <TimelineSeparator>\n <TimelineDot color="secondary">\n <RepeatIcon />\n </TimelineDot>\n </TimelineSeparator>\n <TimelineContent>\n <Paper elevation={3} className={classes.paper}>\n <Typography variant="h6" component="h1">\n Repeat\n </Typography>\n <Typography>Because this is the life you love!</Typography>\n </Paper>\n </TimelineContent>\n </TimelineItem>\n </Timeline>\n );\n}\n'},2617:function(e,n,i){"use strict";i.r(n);var t=i(1130),a=i(1098),r=i(1090),o=i(194),l=i(1072),m=i(1);const c=Object(l.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));n.default=function(e){return c(),Object(m.jsxs)(m.Fragment,{children:[Object(m.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(m.jsxs)(a.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/timeline",target:"_blank",role:"button",children:[Object(m.jsx)(r.a,{children:"link"}),Object(m.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(m.jsx)(o.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Timeline"}),Object(m.jsx)(o.a,{className:"description",children:"The timeline displays a list of events in chronological order."}),Object(m.jsxs)(o.a,{className:"mb-16",component:"div",children:[Object(m.jsx)("strong",{children:"Note:"})," This component is not documented in the"," ",Object(m.jsx)("a",{href:"https://material.io/",children:"Material Design guidelines"}),", but Material-UI supports it."]}),Object(m.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Basic timeline"}),Object(m.jsx)(o.a,{className:"mb-16",component:"div",children:"A basic timeline showing list of events."}),Object(m.jsx)(o.a,{className:"mb-16",component:"div",children:Object(m.jsx)(t.a,{className:"my-24",iframe:!1,component:i(2389).default,raw:i(2390)})}),Object(m.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Right aligned timeline"}),Object(m.jsx)(o.a,{className:"mb-16",component:"div",children:"The timeline can be positioned on the right side of the events."}),Object(m.jsx)(o.a,{className:"mb-16",component:"div",children:Object(m.jsx)(t.a,{className:"my-24",iframe:!1,component:i(2391).default,raw:i(2392)})}),Object(m.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Alternating timeline"}),Object(m.jsx)(o.a,{className:"mb-16",component:"div",children:"The timeline can display the events on alternating sides."}),Object(m.jsx)(o.a,{className:"mb-16",component:"div",children:Object(m.jsx)(t.a,{className:"my-24",iframe:!1,component:i(2393).default,raw:i(2394)})}),Object(m.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Color"}),Object(m.jsxs)(o.a,{className:"mb-16",component:"div",children:["The ",Object(m.jsx)("code",{children:"TimelineDot"})," can appear in different colors."]}),Object(m.jsx)(o.a,{className:"mb-16",component:"div",children:Object(m.jsx)(t.a,{className:"my-24",iframe:!1,component:i(2395).default,raw:i(2396)})}),Object(m.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Outlined"}),Object(m.jsx)(o.a,{className:"mb-16",component:"div",children:Object(m.jsx)(t.a,{className:"my-24",iframe:!1,component:i(2397).default,raw:i(2398)})}),Object(m.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Opposite content"}),Object(m.jsx)(o.a,{className:"mb-16",component:"div",children:"The timeline can display content on opposite sides."}),Object(m.jsx)(o.a,{className:"mb-16",component:"div",children:Object(m.jsx)(t.a,{className:"my-24",iframe:!1,component:i(2399).default,raw:i(2400)})}),Object(m.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Customized timeline"}),Object(m.jsxs)(o.a,{className:"mb-16",component:"div",children:["Here is an example of customizing the component. You can learn more about this in the",Object(m.jsx)("a",{href:"/customization/components/",children:"overrides documentation page"}),"."]}),Object(m.jsx)(o.a,{className:"mb-16",component:"div",children:Object(m.jsx)(t.a,{className:"my-24",iframe:!1,component:i(2401).default,raw:i(2406)})})]})}}}]);
Zerion Mini Shell 1.0