component---src-pages-404-js-08f90ad8b2905e1368d6.js.map

{"version":3,"sources":["webpack:///./src/pages/404.js"],"names":["StyledMainContainer","styled","main","theme","mixins","flexCenter","StyledTitle","h1","StyledSubtitle","h2","StyledHomeButton","Link","bigButton","NotFoundPage","location","useState","isMounted","setIsMounted","useEffect","timeout","setTimeout","navDelay","clearTimeout","title","component","classNames","className","to"],"mappings":"2FAAA,oHASMA,EAAsBC,IAAOC,KAAV,8EAAGD,CAAH,gCACrB,qBAAGE,MAAkBC,OAAOC,cAG1BC,EAAcL,IAAOM,GAAV,sEAAGN,CAAH,sGAMXO,EAAiBP,IAAOQ,GAAV,yEAAGR,CAAH,qDAIdS,EAAmBT,YAAOU,QAAV,2EAAGV,CAAH,0BAClB,qBAAGE,MAAkBC,OAAOQ,aAmCjBC,UA/BM,SAAC,GAAkB,IAAhBC,EAAe,EAAfA,SAAe,EACHC,oBAAS,GAApCC,EAD8B,KACnBC,EADmB,KAQrC,OALAC,qBAAU,WACR,IAAMC,EAAUC,YAAW,kBAAMH,GAAa,KAAOI,KACrD,OAAO,kBAAMC,aAAaH,MACzB,IAGD,kBAAC,IAAD,CAAQL,SAAUA,GAChB,kBAAC,IAAD,CAAQS,MAAM,mBAEd,kBAAC,IAAD,CAAiBC,UAAW,MACzBR,GACC,kBAAC,IAAD,CAAeG,QAAS,IAAKM,WAAW,UACtC,kBAACzB,EAAD,CAAqB0B,UAAU,cAC7B,kBAACpB,EAAD,YACA,kBAACE,EAAD,uBACA,kBAACE,EAAD,CAAkBiB,GAAG,KAArB","file":"component---src-pages-404-js-08f90ad8b2905e1368d6.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\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\r\n  useEffect(() => {\r\n    const timeout = setTimeout(() => setIsMounted(true), navDelay);\r\n    return () => clearTimeout(timeout);\r\n  }, []);\r\n\r\n  return (\r\n    <Layout location={location}>\r\n      <Helmet title=\"Page Not Found\" />\r\n\r\n      <TransitionGroup component={null}>\r\n        {isMounted && (\r\n          <CSSTransition timeout={500} classNames=\"fadeup\">\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          </CSSTransition>\r\n        )}\r\n      </TransitionGroup>\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"],"sourceRoot":""}