{"ast":null,"code":"import _slicedToArray from \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\n\nvar _this = this,\n _jsxFileName = \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/components/MiscDemo.js\";\n\nimport React, { useState, useEffect, useRef } from 'react';\nimport { ProgressBar } from 'primereact/progressbar';\nimport { Button } from 'primereact/button';\nimport { Badge } from 'primereact/badge';\nimport { Tag } from 'primereact/tag';\nimport { Avatar } from 'primereact/avatar';\nimport { AvatarGroup } from 'primereact/avatargroup';\nimport { Chip } from 'primereact/chip';\nimport { Skeleton } from 'primereact/skeleton';\nimport { ScrollPanel } from 'primereact/scrollpanel';\nimport { ScrollTop } from 'primereact/scrolltop';\n\nvar MiscDemo = function MiscDemo() {\n var _useState = useState(0),\n _useState2 = _slicedToArray(_useState, 2),\n value = _useState2[0],\n setValue = _useState2[1];\n\n var interval = useRef(null);\n useEffect(function () {\n var val = value;\n interval.current = setInterval(function () {\n val += Math.floor(Math.random() * 10) + 1;\n\n if (val >= 100) {\n val = 100;\n clearInterval(interval.current);\n }\n\n setValue(val);\n }, 2000);\n return function () {\n if (interval.current) {\n clearInterval(interval.current);\n interval.current = null;\n }\n };\n }, [value]);\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 38,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 39,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 40,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 41,\n columnNumber: 21\n }\n }, \"ProgressBar\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 42,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 43,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(ProgressBar, {\n value: value,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 44,\n columnNumber: 29\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 46,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(ProgressBar, {\n value: \"50\",\n showValue: false,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 47,\n columnNumber: 29\n }\n }))))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 lg:col-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 52,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 53,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h4\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 54,\n columnNumber: 21\n }\n }, \"Badge\"), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 55,\n columnNumber: 21\n }\n }, \"Numbers\"), /*#__PURE__*/React.createElement(Badge, {\n value: \"2\",\n className: \"mr-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 56,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Badge, {\n value: \"8\",\n severity: \"success\",\n className: \"mr-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 57,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Badge, {\n value: \"4\",\n severity: \"info\",\n className: \"mr-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 58,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Badge, {\n value: \"12\",\n severity: \"warning\",\n className: \"mr-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 59,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Badge, {\n value: \"3\",\n severity: \"danger\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 60,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 62,\n columnNumber: 21\n }\n }, \"Positioned Badge\"), /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-bell mr-4 p-text-secondary p-overlay-badge\",\n style: {\n fontSize: '2rem'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 63,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(Badge, {\n value: \"2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 63,\n columnNumber: 114\n }\n })), /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-calendar mr-4 p-text-secondary p-overlay-badge\",\n style: {\n fontSize: '2rem'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 64,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(Badge, {\n value: \"10+\",\n severity: \"danger\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 64,\n columnNumber: 118\n }\n })), /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-envelope p-text-secondary p-overlay-badge\",\n style: {\n fontSize: '2rem'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 65,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(Badge, {\n severity: \"danger\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 65,\n columnNumber: 113\n }\n })), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 67,\n columnNumber: 21\n }\n }, \"Button Badge\"), /*#__PURE__*/React.createElement(Button, {\n type: \"button\",\n label: \"Emails\",\n className: \"mr-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 68,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(Badge, {\n value: \"8\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 68,\n columnNumber: 75\n }\n })), /*#__PURE__*/React.createElement(Button, {\n type: \"button\",\n label: \"Messages\",\n icon: \"pi pi-users\",\n className: \"p-button-warning\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 69,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(Badge, {\n value: \"8\",\n severity: \"danger\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 69,\n columnNumber: 108\n }\n })), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 71,\n columnNumber: 21\n }\n }, \"Sizes\"), /*#__PURE__*/React.createElement(Badge, {\n value: \"2\",\n className: \"mr-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 72,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Badge, {\n value: \"4\",\n className: \"mr-2\",\n size: \"large\",\n severity: \"warning\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 73,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Badge, {\n value: \"6\",\n size: \"xlarge\",\n severity: \"success\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 74,\n columnNumber: 21\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 77,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h4\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 78,\n columnNumber: 21\n }\n }, \"Avatar\"), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 79,\n columnNumber: 21\n }\n }, \"Avatar Group\"), /*#__PURE__*/React.createElement(AvatarGroup, {\n className: \"mb-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 80,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(Avatar, {\n image: \"assets/demo/images/avatar/amyelsner.png\",\n size: \"large\",\n shape: \"circle\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 81,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Avatar, {\n image: \"assets/demo/images/avatar/asiyajavayant.png\",\n size: \"large\",\n shape: \"circle\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 82,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Avatar, {\n image: \"assets/demo/images/avatar/onyamalimba.png\",\n size: \"large\",\n shape: \"circle\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 83,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Avatar, {\n image: \"assets/demo/images/avatar/ionibowcher.png\",\n size: \"large\",\n shape: \"circle\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 84,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Avatar, {\n image: \"assets/demo/images/avatar/xuxuefeng.png\",\n size: \"large\",\n shape: \"circle\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 85,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Avatar, {\n label: \"+2\",\n shape: \"circle\",\n size: \"large\",\n style: {\n 'backgroundColor': '#9c27b0',\n 'color': '#ffffff'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 86,\n columnNumber: 25\n }\n })), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 89,\n columnNumber: 21\n }\n }, \"Label - Circle\"), /*#__PURE__*/React.createElement(Avatar, {\n label: \"P\",\n className: \"mr-2\",\n size: \"xlarge\",\n shape: \"circle\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 90,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Avatar, {\n label: \"V\",\n className: \"mr-2\",\n size: \"large\",\n style: {\n 'backgroundColor': '#2196F3',\n 'color': '#ffffff'\n },\n shape: \"circle\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 91,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Avatar, {\n label: \"U\",\n className: \"mr-2\",\n style: {\n 'backgroundColor': '#9c27b0',\n 'color': '#ffffff'\n },\n shape: \"circle\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 92,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 94,\n columnNumber: 21\n }\n }, \"Icon - Badge\"), /*#__PURE__*/React.createElement(Avatar, {\n className: \"p-overlay-badge\",\n icon: \"pi pi-user\",\n size: \"xlarge\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 95,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(Badge, {\n value: \"4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 95,\n columnNumber: 89\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 98,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h4\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 99,\n columnNumber: 21\n }\n }, \"ScrollTop\"), /*#__PURE__*/React.createElement(ScrollPanel, {\n style: {\n width: '250px',\n height: '200px'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 100,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"p\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 101,\n columnNumber: 25\n }\n }, \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.\"), /*#__PURE__*/React.createElement(ScrollTop, {\n target: \"parent\",\n className: \"custom-scrolltop\",\n threshold: 100,\n icon: \"pi pi-arrow-up\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 114,\n columnNumber: 25\n }\n })))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 lg:col-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 118,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 119,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h4\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 120,\n columnNumber: 21\n }\n }, \"Tag\"), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 121,\n columnNumber: 21\n }\n }, \"Tags\"), /*#__PURE__*/React.createElement(Tag, {\n className: \"mr-2\",\n value: \"Primary\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 122,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Tag, {\n className: \"mr-2\",\n severity: \"success\",\n value: \"Success\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 123,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Tag, {\n className: \"mr-2\",\n severity: \"info\",\n value: \"Info\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 124,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Tag, {\n className: \"mr-2\",\n severity: \"warning\",\n value: \"Warning\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 125,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Tag, {\n severity: \"danger\",\n value: \"Danger\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 126,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 128,\n columnNumber: 21\n }\n }, \"Pills\"), /*#__PURE__*/React.createElement(Tag, {\n className: \"mr-2\",\n value: \"Primary\",\n rounded: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 129,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Tag, {\n className: \"mr-2\",\n severity: \"success\",\n value: \"Success\",\n rounded: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 130,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Tag, {\n className: \"mr-2\",\n severity: \"info\",\n value: \"Info\",\n rounded: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 131,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Tag, {\n className: \"mr-2\",\n severity: \"warning\",\n value: \"Warning\",\n rounded: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 132,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Tag, {\n severity: \"danger\",\n value: \"Danger\",\n rounded: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 133,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 135,\n columnNumber: 21\n }\n }, \"Icons\"), /*#__PURE__*/React.createElement(Tag, {\n className: \"mr-2\",\n icon: \"pi pi-user\",\n value: \"Primary\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 136,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Tag, {\n className: \"mr-2\",\n icon: \"pi pi-check\",\n severity: \"success\",\n value: \"Success\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 137,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Tag, {\n className: \"mr-2\",\n icon: \"pi pi-info-circle\",\n severity: \"info\",\n value: \"Info\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 138,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Tag, {\n className: \"mr-2\",\n icon: \"pi pi-exclamation-triangle\",\n severity: \"warning\",\n value: \"Warning\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 139,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Tag, {\n icon: \"pi pi-times\",\n severity: \"danger\",\n value: \"Danger\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 140,\n columnNumber: 21\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 143,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h4\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 144,\n columnNumber: 21\n }\n }, \"Chip\"), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 145,\n columnNumber: 21\n }\n }, \"Basic\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex align-items-center flex-column sm:flex-row\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 146,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(Chip, {\n label: \"Action\",\n className: \"mr-2 mb-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 147,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Chip, {\n label: \"Comedy\",\n className: \"mr-2 mb-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 148,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Chip, {\n label: \"Mystery\",\n className: \"mr-2 mb-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 149,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Chip, {\n label: \"Thriller\",\n className: \"mb-2\",\n removable: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 150,\n columnNumber: 25\n }\n })), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 153,\n columnNumber: 21\n }\n }, \"Icon\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex align-items-center flex-column sm:flex-row\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 154,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(Chip, {\n label: \"Apple\",\n icon: \"pi pi-apple\",\n className: \"mr-2 mb-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 155,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Chip, {\n label: \"Facebook\",\n icon: \"pi pi-facebook\",\n className: \"mr-2 mb-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 156,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Chip, {\n label: \"Google\",\n icon: \"pi pi-google\",\n className: \"mr-2 mb-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 157,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Chip, {\n label: \"Microsoft\",\n icon: \"pi pi-microsoft\",\n className: \"mb-2\",\n removable: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 158,\n columnNumber: 25\n }\n })), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 161,\n columnNumber: 21\n }\n }, \"Image\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex align-items-center flex-column sm:flex-row\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 162,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(Chip, {\n label: \"Amy Elsner\",\n image: \"assets/demo/images/avatar/amyelsner.png\",\n className: \"mr-2 mb-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 163,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Chip, {\n label: \"Asiya Javayant\",\n image: \"assets/demo/images/avatar/asiyajavayant.png\",\n className: \"mr-2 mb-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 164,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Chip, {\n label: \"Onyama Limba\",\n image: \"assets/demo/images/avatar/onyamalimba.png\",\n className: \"mr-2 mb-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 165,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Chip, {\n label: \"Xuxue Feng\",\n image: \"assets/demo/images/avatar/xuxuefeng.png\",\n className: \"mb-2\",\n removable: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 166,\n columnNumber: 25\n }\n })), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 169,\n columnNumber: 21\n }\n }, \"Styling\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex align-items-center flex-column sm:flex-row\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 170,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(Chip, {\n label: \"Action\",\n className: \"mr-2 mb-2 custom-chip\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 171,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Chip, {\n label: \"Apple\",\n icon: \"pi pi-apple\",\n className: \"mr-2 mb-2 custom-chip\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 172,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Chip, {\n label: \"Onyama Limba\",\n image: \"assets/demo/images/avatar/onyamalimba.png\",\n className: \"mr-2 mb-2 custom-chip\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 173,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Chip, {\n label: \"Xuxue Feng\",\n image: \"assets/demo/images/avatar/xuxuefeng.png\",\n className: \"custom-chip mb-2\",\n removable: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 174,\n columnNumber: 25\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 178,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h4\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 179,\n columnNumber: 21\n }\n }, \"Skeleton\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"border-round border-1 surface-border p-4\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 180,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex mb-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 181,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(Skeleton, {\n shape: \"circle\",\n size: \"4rem\",\n className: \"mr-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 182,\n columnNumber: 29\n }\n }), /*#__PURE__*/React.createElement(\"div\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 183,\n columnNumber: 29\n }\n }, /*#__PURE__*/React.createElement(Skeleton, {\n width: \"10rem\",\n className: \"mb-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 184,\n columnNumber: 33\n }\n }), /*#__PURE__*/React.createElement(Skeleton, {\n width: \"5rem\",\n className: \"mb-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 185,\n columnNumber: 33\n }\n }), /*#__PURE__*/React.createElement(Skeleton, {\n height: \".5rem\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 186,\n columnNumber: 33\n }\n }))), /*#__PURE__*/React.createElement(Skeleton, {\n width: \"100%\",\n height: \"150px\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 189,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex justify-content-between mt-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 190,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(Skeleton, {\n width: \"4rem\",\n height: \"2rem\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 191,\n columnNumber: 29\n }\n }), /*#__PURE__*/React.createElement(Skeleton, {\n width: \"4rem\",\n height: \"2rem\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 192,\n columnNumber: 29\n }\n }))))));\n};\n\nvar comparisonFn = function comparisonFn(prevProps, nextProps) {\n return prevProps.location.pathname === nextProps.location.pathname;\n};\n\nexport default React.memo(MiscDemo, comparisonFn);","map":{"version":3,"names":["React","useState","useEffect","useRef","ProgressBar","Button","Badge","Tag","Avatar","AvatarGroup","Chip","Skeleton","ScrollPanel","ScrollTop","MiscDemo","value","setValue","interval","val","current","setInterval","Math","floor","random","clearInterval","fontSize","width","height","comparisonFn","prevProps","nextProps","location","pathname","memo"],"sources":["/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/components/MiscDemo.js"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport { ProgressBar } from 'primereact/progressbar';\nimport { Button } from 'primereact/button';\nimport { Badge } from 'primereact/badge';\nimport { Tag } from 'primereact/tag';\nimport { Avatar } from 'primereact/avatar';\nimport { AvatarGroup } from 'primereact/avatargroup';\nimport { Chip } from 'primereact/chip';\nimport { Skeleton } from 'primereact/skeleton';\nimport { ScrollPanel } from 'primereact/scrollpanel';\nimport { ScrollTop } from 'primereact/scrolltop';\n\nconst MiscDemo = () => {\n const [value, setValue] = useState(0);\n const interval = useRef(null);\n\n useEffect(() => {\n let val = value;\n interval.current = setInterval(() => {\n val += Math.floor(Math.random() * 10) + 1;\n\n if (val >= 100) {\n val = 100;\n clearInterval(interval.current);\n }\n setValue(val);\n }, 2000);\n\n return () => {\n if (interval.current) {\n clearInterval(interval.current);\n interval.current = null;\n }\n }\n }, [value]);\n\n return (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n Vitae et leo duis ut diam.\n Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.\n Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.\n Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.\n Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.\n Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.\n Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.\n Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.\n Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.\n Mattis aliquam faucibus purus in massa tempor nec.\n
\n