component---src-pages-animations-js-245c6531c3eee6a927ad.js.map

{"version":3,"file":"component---src-pages-animations-js-245c6531c3eee6a927ad.js","mappings":"6IAQA,IAJe,SAAC,GAAwB,IAAtBA,EAAqB,EAArBA,MAAOC,EAAc,EAAdA,QACvB,OAAO,gBAAC,IAAD,CAAcA,QAASA,GAAUD,K,yFCH7BE,GAAqBC,EAAAA,EAAAA,KAAH,qKACd,qBAAGC,MAAkBC,MAAMC,UAgB/BC,EAAeC,EAAAA,QAAAA,OAAAA,WAAH,gEAAGA,CAAH,4FACrBN,GACY,qBAAGE,MAAkBK,OAAOC,UAAUC,SAC3C,qBAAGP,MAAkBK,OAAOG,U,iICpB1BC,EAAoBL,EAAAA,QAAAA,QAAAA,WAAH,qEAAGA,CAAH,mHAC1B,qBAAGJ,MAAkBU,MAAMC,aASlBC,EAAmBR,EAAAA,QAAAA,IAAAA,WAAH,oEAAGA,CAAH,+CAOhBS,EAA6BT,EAAAA,QAAAA,IAAAA,WAAH,8EAAGA,CAAH,0BCnB1BU,EAAa,CACxB,CACElB,MAAO,SACPmB,QAAS,CACP,UACA,YACA,UACA,eACA,SACA,gBAGJ,CACEnB,MAAO,mBACPmB,QAAS,CAAC,aAAc,cAAe,eAAgB,kBAEzD,CACEnB,MAAO,QACPmB,QAAS,CAAC,mBAAoB,uBAEhC,CACEnB,MAAO,SACPmB,QAAS,CAAC,qBAAsB,uBAAwB,iBAE1D,CACEnB,MAAO,YACPmB,QAAS,CAAC,eAAgB,WAE5B,CACEnB,MAAO,cACPmB,QAAS,CACP,qBACA,gBACA,sBACA,qBACA,oBACA,kBACA,sBAGJ,CACEnB,MAAO,SACPmB,QAAS,CACP,kBACA,eACA,gBACA,mBAGJ,CACEnB,MAAO,UACPmB,QAAS,CAAC,gBAAiB,mBAAoB,oBCOnD,MA5CA,WACE,OAA+BC,EAAAA,EAAAA,KAAvBC,EAAR,EAAQA,MAAOC,EAAf,EAAeA,YACf,GAAkCC,EAAAA,EAAAA,UAAS,IAApCC,EAAP,KAAkBC,EAAlB,KAEA,OACE,gCACE,gBAACC,EAAA,EAAD,KACE,6BAAQL,EAAR,0BACA,wBAAMM,KAAK,cAAcC,QAASN,IAClC,wBAAMO,SAAS,WAAWD,QAAYP,EAAL,2BACjC,wBAAMQ,SAAS,iBAAiBD,QAASN,KAG3C,gBAACT,EAAD,KACE,gBAACI,EAAD,KACGC,EAAWY,KAAI,gBAAG9B,EAAH,EAAGA,MAAOmB,EAAV,EAAUA,QAAV,OACd,gCACE,gBAACY,EAAA,EAAD,CAAYC,GAAG,KAAKC,QAAQ,KAAKC,WAAS,GACvClC,GAGFmB,EAAQW,KAAI,SAACK,GAAD,OACX,gBAACC,EAAA,EAAD,CACEnC,QAAS,kBAAMwB,EAAaU,IAC5BnC,MAAOmC,YAMjB,gBAACnB,EAAD,KACE,uBAAKqB,UAAU,iBACb,uBACEA,UAAWb,EACXc,IAAI,+CACJC,IAAI,mBC1ClB,EAJuB,WACrB,OAAO,gBAAC,EAAD","sources":["webpack://my-gatsby-site/./src/components/Button/index.js","webpack://my-gatsby-site/./src/components/Button/styled.js","webpack://my-gatsby-site/./src/containers/Animations/styled.js","webpack://my-gatsby-site/./src/containers/Animations/utils.js","webpack://my-gatsby-site/./src/containers/Animations/index.js","webpack://my-gatsby-site/./src/pages/animations.js"],"sourcesContent":["import React from \"react\";\n\nimport { ButtonStyled } from \"./styled\";\n\nconst Button = ({ label, onClick }) => {\n  return <ButtonStyled onClick={onClick}>{label}</ButtonStyled>;\n};\n\nexport default Button;\n","import styled, { css } from \"styled-components\";\n\nexport const commonButtonStyles = css`\n  font-family: ${({ theme }) => theme.fonts.roboto};\n  font-size: 24px;\n  margin: 12px;\n  border: none;\n  cursor: pointer;\n  transition: filter 0.2s;\n\n  &:hover {\n    filter: brightness(0.95);\n  }\n\n  &:active {\n    filter: brightness(0.9);\n  }\n`;\n\nexport const ButtonStyled = styled.button`\n  ${commonButtonStyles};\n  background: ${({ theme }) => theme.colors.secondary.light};\n  color: ${({ theme }) => theme.colors.white};\n  width: fit-content;\n  border-radius: 6px;\n  padding: 0.6rem 1.8rem;\n`;\n","import styled from \"styled-components\";\n\nexport const AnimationsWrapper = styled.section`\n  ${({ theme }) => theme.utils.container};\n\n  display: grid;\n  grid-template-columns: 70% auto;\n  grid-template-rows: auto;\n  padding-top: 5rem;\n  padding-bottom: 5rem;\n`;\n\nexport const AnimationsFigure = styled.div`\n  .a-perspective {\n    position: fixed;\n    top: 200px;\n  }\n`;\n\nexport const AnimationsButtonsContainer = styled.div`\n  h3 {\n    margin-top: 1rem;\n  }\n`;\n","export const animations = [\n  {\n    label: \"Bounce\",\n    classes: [\n      \"a-dance\",\n      \"a-journal\",\n      \"a-pulse\",\n      \"a-pulse-slow\",\n      \"a-jamp\",\n      \"a-four-rock\",\n    ],\n  },\n  {\n    label: \"Fading Entrances\",\n    classes: [\"a-flip-top\", \"a-flip-left\", \"a-flip-right\", \"a-flip-bottom\"],\n  },\n  {\n    label: \"Jello\",\n    classes: [\"a-jello-vertical\", \"a-jello-horizontal\"],\n  },\n  {\n    label: \"Rotate\",\n    classes: [\"a-rotate-flip-down\", \"a-rotate-down-bounce\", \"a-rotate-out\"],\n  },\n  {\n    label: \"Agrecives\",\n    classes: [\"a-flash-bang\", \"a-bomb\"],\n  },\n  {\n    label: \"Perspective\",\n    classes: [\n      \"a-flip-left-bounce\",\n      \"a-rotate-flip\",\n      \"a-flip-right-bounce\",\n      \"a-three-flip-right\",\n      \"a-three-flip-left\",\n      \"a-three-flip-up\",\n      \"a-three-flip-down\",\n    ],\n  },\n  {\n    label: \"Wobble\",\n    classes: [\n      \"a-wobble-bottom\",\n      \"a-wobble-top\",\n      \"a-wobble-left\",\n      \"a-wobble-right\",\n    ],\n  },\n  {\n    label: \"Vibrate\",\n    classes: [\"a-vibrate-low\", \"a-vibrate-medium\", \"a-vibrate-high\"],\n  },\n];\n","import React, { useState } from \"react\";\nimport { Helmet } from \"react-helmet\";\nimport useSiteMetadata from \"../../hooks/useSiteMetadata\";\n\nimport Button from \"../../components/Button\";\nimport Typography from \"../../components/Typography\";\n\nimport {\n  AnimationsWrapper,\n  AnimationsFigure,\n  AnimationsButtonsContainer,\n} from \"./styled\";\nimport { animations } from \"./utils\";\n\nfunction Animations() {\n  const { title, description } = useSiteMetadata();\n  const [animation, setAnimation] = useState(\"\");\n\n  return (\n    <>\n      <Helmet>\n        <title>{title} - animations examples</title>\n        <meta name=\"description\" content={description} />\n        <meta property=\"og:title\" content={`${title} - animations examples`} />\n        <meta property=\"og:description\" content={description} />\n      </Helmet>\n\n      <AnimationsWrapper>\n        <AnimationsButtonsContainer>\n          {animations.map(({ label, classes }) => (\n            <>\n              <Typography as=\"h3\" variant=\"h3\" paragraph>\n                {label}\n              </Typography>\n\n              {classes.map((currentClass) => (\n                <Button\n                  onClick={() => setAnimation(currentClass)}\n                  label={currentClass}\n                />\n              ))}\n            </>\n          ))}\n        </AnimationsButtonsContainer>\n        <AnimationsFigure>\n          <div className=\"a-perspective\">\n            <img\n              className={animation}\n              src=\"https://i.ibb.co/23ZSKd0/all-animation-1.png\"\n              alt=\"animation\"\n            />\n          </div>\n        </AnimationsFigure>\n      </AnimationsWrapper>\n    </>\n  );\n}\n\nexport default Animations;\n","import * as React from \"react\";\nimport Animations from \"../containers/Animations\";\n\nconst AnimationsPage = () => {\n  return <Animations />;\n};\n\nexport default AnimationsPage;\n"],"names":["label","onClick","commonButtonStyles","css","theme","fonts","roboto","ButtonStyled","styled","colors","secondary","light","white","AnimationsWrapper","utils","container","AnimationsFigure","AnimationsButtonsContainer","animations","classes","useSiteMetadata","title","description","useState","animation","setAnimation","Helmet","name","content","property","map","Typography","as","variant","paragraph","currentClass","Button","className","src","alt"],"sourceRoot":""}