component---src-pages-404-js-3c3a0f1de7055961fa7e.js.map

{"version":3,"file":"component---src-pages-404-js-3c3a0f1de7055961fa7e.js","mappings":"kMAUMA,EAAsBC,EAAAA,QAAAA,KAAAA,WAAW,sEAAXA,CAAW,gCACnC,YAAQ,SAALC,MAAkBC,OAAOC,UAAU,IAGpCC,EAAcJ,EAAAA,QAAAA,GAAAA,WAAS,8DAATA,CAAS,sGAMvBK,EAAiBL,EAAAA,QAAAA,GAAAA,WAAS,iEAATA,CAAS,qDAI1BM,GAAmBN,EAAAA,EAAAA,SAAOO,EAAAA,MAAK,8EAAZP,CAAY,0BACjC,YAAQ,SAALC,MAAkBC,OAAOM,SAAS,IAgDzC,UA5CqB,SAAH,GAAsB,IAAhBC,EAAQ,EAARA,SACtB,GAAkCC,EAAAA,EAAAA,WAAS,GAApCC,EAAS,KAAEC,EAAY,KACxBC,GAAuBC,EAAAA,EAAAA,OAE7BC,EAAAA,EAAAA,YAAU,WACR,IAAIF,EAAJ,CAIA,IAAMG,EAAUC,YAAW,kBAAML,GAAa,EAAK,GAAEM,EAAAA,IACrD,OAAO,kBAAMC,aAAaH,EAAS,CAHnC,CAIF,GAAG,IAEH,IAAMI,EACJ,gBAACrB,EAAmB,CAACsB,UAAU,cAC7B,gBAACjB,EAAW,KAAC,OACb,gBAACC,EAAc,KAAC,kBAChB,gBAACC,EAAgB,CAACgB,GAAG,KAAI,YAI7B,OACE,gBAAC,KAAM,CAACb,SAAUA,GAChB,gBAAC,IAAM,CAACc,MAAM,mBAEbV,EACC,gCAAGO,GAEH,gBAAC,IAAe,CAACI,UAAW,MACzBb,GACC,gBAAC,IAAa,CAACK,QAAS,IAAKS,WAAW,UACrCL,IAOf,C","sources":["webpack://v4/./src/pages/404.js"],"sourcesContent":["import React, { useState, useEffect } from 'react';\r\nimport { Link } from 'gatsby';\r\nimport { Helmet } from 'react-helmet';\r\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\r\nimport PropTypes from 'prop-types';\r\nimport styled from 'styled-components';\r\nimport { navDelay } from '@utils';\r\nimport { Layout } from '@components';\r\nimport { usePrefersReducedMotion } from '@hooks';\r\n\r\nconst StyledMainContainer = styled.main`\r\n  ${({ theme }) => theme.mixins.flexCenter};\r\n  flex-direction: column;\r\n`;\r\nconst StyledTitle = styled.h1`\r\n  color: var(--green);\r\n  font-family: var(--font-mono);\r\n  font-size: clamp(100px, 25vw, 200px);\r\n  line-height: 1;\r\n`;\r\nconst StyledSubtitle = styled.h2`\r\n  font-size: clamp(30px, 5vw, 50px);\r\n  font-weight: 400;\r\n`;\r\nconst StyledHomeButton = styled(Link)`\r\n  ${({ theme }) => theme.mixins.bigButton};\r\n  margin-top: 40px;\r\n`;\r\n\r\nconst NotFoundPage = ({ location }) => {\r\n  const [isMounted, setIsMounted] = useState(false);\r\n  const prefersReducedMotion = usePrefersReducedMotion();\r\n\r\n  useEffect(() => {\r\n    if (prefersReducedMotion) {\r\n      return;\r\n    }\r\n\r\n    const timeout = setTimeout(() => setIsMounted(true), navDelay);\r\n    return () => clearTimeout(timeout);\r\n  }, []);\r\n\r\n  const content = (\r\n    <StyledMainContainer className=\"fillHeight\">\r\n      <StyledTitle>404</StyledTitle>\r\n      <StyledSubtitle>Page Not Found</StyledSubtitle>\r\n      <StyledHomeButton to=\"/\">Go Home</StyledHomeButton>\r\n    </StyledMainContainer>\r\n  );\r\n\r\n  return (\r\n    <Layout location={location}>\r\n      <Helmet title=\"Page Not Found\" />\r\n\r\n      {prefersReducedMotion ? (\r\n        <>{content}</>\r\n      ) : (\r\n        <TransitionGroup component={null}>\r\n          {isMounted && (\r\n            <CSSTransition timeout={500} classNames=\"fadeup\">\r\n              {content}\r\n            </CSSTransition>\r\n          )}\r\n        </TransitionGroup>\r\n      )}\r\n    </Layout>\r\n  );\r\n};\r\n\r\nNotFoundPage.propTypes = {\r\n  location: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default NotFoundPage;\r\n"],"names":["StyledMainContainer","styled","theme","mixins","flexCenter","StyledTitle","StyledSubtitle","StyledHomeButton","Link","bigButton","location","useState","isMounted","setIsMounted","prefersReducedMotion","usePrefersReducedMotion","useEffect","timeout","setTimeout","navDelay","clearTimeout","content","className","to","title","component","classNames"],"sourceRoot":""}