component---src-template-dashboard-tsx-fbcbe37702d204f34cd6.js.map

{"version":3,"sources":["webpack://blog/./src/template/dashboard.tsx"],"names":["Panel","styled","Section","DashboardPage","React","target","pageContext","pageData","map","url","title","replace","idx","UnitPanel","key","data","href","src","alt","width"],"mappings":"oJAaMA,EAAQC,qBAAH,4DAAGA,CAAH,qUA4BLC,EAAUD,wBAAH,8DAAGA,CAAH,mHAYPE,EAAqEC,QAAW,YAAsB,IAEpGC,EAFmG,EAAlBC,YAC/EC,SACgBC,KAAI,gBAAGC,EAAH,EAAGA,IAAKC,EAAR,EAAQA,MAAR,MAAqB,CAAED,KAjDvC,qFAiD0DA,GAAME,QAAQ,MAAO,IAAKD,YAChG,OACE,gBAAC,IAAD,KACE,gBAAC,KAAD,KACE,gBAACR,EAAD,KACE,uCACA,+BAEIG,EAAOG,KAAI,WAAiBI,GAAjB,IAAGH,EAAH,EAAGA,IAAKC,EAAR,EAAQA,MAAR,OAA0B,gBAACG,EAAD,CAAWJ,IAAKA,EAAKC,MAAOA,EAAOI,IAAKF,cASrFC,EAAiC,SAACE,GACtC,IAAQN,EAAeM,EAAfN,IAAKC,EAAUK,EAAVL,MACb,OACE,gBAACV,EAAD,KACE,0BAAKU,GACL,qBAAGM,KAAMP,EAAKJ,OAAO,UACnB,uBAAKY,IAAKR,EAAKS,IAAI,GAAGC,MAAM,aAKpC","file":"component---src-template-dashboard-tsx-fbcbe37702d204f34cd6.js","sourcesContent":["import { Main } from '@components'\nimport { PageProps } from '@constant'\nimport Layout from '@layout'\nimport React from 'react'\nimport styled from 'styled-components'\n\nconst BASE_URL = `https://hits.seeyoufarm.com/api/count/graph/dailyhits.svg?url=https://akasai.space`\n\ninterface PanelData {\n  url: string,\n  title: string\n}\n\nconst Panel = styled.span`\n  background-color: var(--app-bg-color);\n  display: inline-block;\n  text-align: center;\n  margin: 5px;\n  padding: 2px 5px;\n  border: 1px solid gray;\n  border-radius: 5px;\n\n  &:hover {\n    transform: scale(1.8);\n    cursor: zoom-in;\n  }\n\n  h3 {\n    display: inline-block;\n    max-width: 200px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    margin: 3px 0;\n  }\n\n  > * {\n    display: block;\n  }\n`\n\nconst Section = styled.section`\n  margin: 8rem auto;\n  width: 1200px;\n\n  section {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n`\n\nconst DashboardPage: React.FC<PageProps<any, { pageData: PanelData[] }>> = React.memo(({ pageContext }) => {\n  const { pageData } = pageContext\n  const target = pageData.map(({ url, title }) => ({ url: `${BASE_URL}${url}`.replace(/\\/$/, ''), title }))\n  return (\n    <Layout>\n      <Main>\n        <Section>\n          <h1>Dashboard</h1>\n          <section>\n            {\n              target.map(({ url, title }, idx) => (<UnitPanel url={url} title={title} key={idx}/>))\n            }\n          </section>\n        </Section>\n      </Main>\n    </Layout>\n  )\n})\n\nconst UnitPanel: React.FC<PanelData> = (data) => {\n  const { url, title } = data\n  return (\n    <Panel>\n      <h3>{title}</h3>\n      <a href={url} target=\"_blank\">\n        <img src={url} alt=\"\" width=\"250px\"/>\n      </a>\n    </Panel>\n  )\n}\nexport default DashboardPage\n"],"sourceRoot":""}