{"ast":null,"code":"var __jsx = React.createElement;\nimport React, { useMemo, useState } from 'react';\nimport { primaryColor, rem } from '~/utils/style';\nimport BarLoader from 'react-spinners/BarLoader';\nimport Chart from '~/components/Chart';\nimport Pagination from '~/components/Pagination';\nimport styled from 'styled-components';\nimport { useTranslation } from '~/utils/i18n';\nvar Wrapper = styled.div.withConfig({\n  displayName: \"ChartPage__Wrapper\",\n  componentId: \"sc-1spxerh-0\"\n})([\"display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;align-content:flex-start;> *{margin:0 \", \" \", \" 0;flex-shrink:0;flex-grow:0;}\"], rem(20), rem(20));\nvar Loading = styled.div.withConfig({\n  displayName: \"ChartPage__Loading\",\n  componentId: \"sc-1spxerh-1\"\n})([\"display:flex;justify-content:center;align-items:center;min-height:\", \";padding:\", \" 0;\"], rem(200), rem(40));\nvar Empty = styled.div.withConfig({\n  displayName: \"ChartPage__Empty\",\n  componentId: \"sc-1spxerh-2\"\n})([\"display:flex;justify-content:center;align-items:center;font-size:\", \";height:\", \";flex-grow:1;\"], rem(20), rem(150)); // TODO: add types\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\nvar ChartPage = function ChartPage(_ref) {\n  var _items$length;\n\n  var items = _ref.items,\n      loading = _ref.loading,\n      withChart = _ref.withChart,\n      className = _ref.className;\n\n  var _useTranslation = useTranslation('common'),\n      t = _useTranslation.t;\n\n  var pageSize = 12;\n  var total = Math.ceil(((_items$length = items === null || items === void 0 ? void 0 : items.length) !== null && _items$length !== void 0 ? _items$length : 0) / pageSize);\n\n  var _useState = useState(1),\n      page = _useState[0],\n      setPage = _useState[1];\n\n  var pageItems = useMemo(function () {\n    var _items$slice;\n\n    return (_items$slice = items === null || items === void 0 ? void 0 : items.slice((page - 1) * pageSize, page * pageSize)) !== null && _items$slice !== void 0 ? _items$slice : [];\n  }, [items, page]);\n  return __jsx(\"div\", {\n    className: className\n  }, loading ? __jsx(Loading, null, __jsx(BarLoader, {\n    color: primaryColor,\n    width: \"20%\",\n    height: \"4px\"\n  })) : __jsx(Wrapper, null, pageItems.length ? pageItems.map(function (item, index) {\n    return __jsx(Chart, {\n      key: index\n    }, withChart === null || withChart === void 0 ? void 0 : withChart(item));\n  }) : __jsx(Empty, null, t('empty'))), __jsx(Pagination, {\n    page: page,\n    total: total,\n    onChange: setPage\n  }));\n};\n\nexport default ChartPage;","map":null,"metadata":{},"sourceType":"module"}