{"version":3,"file":"component---src-theme-organisms-category-banner-index-ts-03251b3bfb7fc0f214a5.js","mappings":"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","sources":["webpack://rlx-react-app-gatsby/./src/svg/Arrow.tsx","webpack://rlx-react-app-gatsby/./src/theme/organisms/CategoryBanner/const.ts","webpack://rlx-react-app-gatsby/./src/theme/organisms/CategoryBanner/CategoryBanner.tsx","webpack://rlx-react-app-gatsby/./.cache/gatsby-plugin-graphql-component/components/8a12b2f7-e94e-5a33-b352-f86368b98312.js"],"sourcesContent":["import * as React from 'react'\n\ntype Props = {\n  color?: string\n}\n\nexport default function Arrow(props: Props) {\n  let color = props.color || '#262626'\n  return (\n    <svg\n      width=\"42px\"\n      height=\"9px\"\n      viewBox=\"0 0 42 9\"\n      version=\"1.1\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Line 4</title>\n      <g id=\"shop-design\" stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n        <g\n          id=\"desktop-home-wide-full\"\n          transform=\"translate(-882.000000, -1020.000000)\"\n          fill={color}\n          fillRule=\"nonzero\"\n        >\n          <g id=\"Group-7\" transform=\"translate(140.000000, 870.000000)\">\n            <g id=\"teaser-02\" transform=\"translate(600.000000, 0.000000)\">\n              <g id=\"button\" transform=\"translate(41.000000, 139.000000)\">\n                <path\n                  id=\"Line-4\"\n                  d=\"M133.5,11 L142.5,15.5 L133.5,20 L133.5,16 L101.5,16 L101.5,15 L133.5,15 L133.5,11 Z\"\n                ></path>\n              </g>\n            </g>\n          </g>\n        </g>\n      </g>\n    </svg>\n  )\n}\n","export const colors = {\n  Gelb: 'rgba(213, 227, 131, 0.4)',\n  Grün: 'rgba(114, 200, 182, 0.4)',\n  Blau: 'rgba(134, 212, 232, 0.4)',\n  Orange: 'rgba(240, 168, 126, 0.4)',\n}\n","import useLazyImageSrc from 'hooks/useLazyImageSrc'\nimport * as React from 'react'\nimport styled, { css } from 'styled-components'\nimport * as t from './types'\nimport { colors } from './const'\nimport ty from 'utils/typographie'\nimport ArrowSvg from 'svg/Arrow'\nimport Link from 'theme/atoms/Link'\nimport { ms } from 'modules/browser/const'\nimport useInView from 'hooks/useInView'\nimport * as actions from './actions'\n\nexport default function CategoryBanner(props: t.Props) {\n  const [ref, image] = useLazyImageSrc(\n    props.context.optImg,\n    props.context.base64,\n    200,\n  )\n  const [wrapperRef, inView] = useInView()\n  const wasInView = React.useRef(false)\n\n  React.useEffect(() => {\n    if (inView && !wasInView.current) {\n      wasInView.current = true\n      props.eecTrack && actions.scrollIntoView(props)\n    }\n  }, [inView, props])\n\n  const handleClick = () => props.eecTrack && actions.click(props)\n\n  return (\n    <Wrapper\n      ref={wrapperRef}\n      onClick={handleClick}\n      textPosition={props.textPosition}\n      bg={colors[props.backgroundColor]}\n      to={props.link}\n    >\n      <div className=\"overlay\" />\n      <div className=\"text\">\n        <div className=\"h-wrapper\">\n          <h3>{props.title}</h3>\n        </div>\n        <p>{props.subtitle}</p>\n        <span>\n          {props.linktext} <ArrowSvg />\n        </span>\n      </div>\n      <div className=\"img-wrapper\">\n        <img ref={ref} src={image} alt={props.alt} />\n      </div>\n    </Wrapper>\n  )\n}\n\nconst isLeft = (p) => p.textPosition === 'top-left' || p.textPosition === 'bottom-left'\nconst isTop = (p) => p.textPosition === 'top-left' || p.textPosition === 'top-right'\n\nconst Wrapper = styled(Link)`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  overflow: hidden;\n\n  > .overlay {\n    position: absolute;\n    width: 200%;\n    height: 360px;\n    @media (min-width: ${ms.LAPTOP_L}px) {\n      height: 520px;\n    }\n    background: ${(p) => p.bg};\n    border-radius: 48%;\n    ${(p) => {\n      switch (p.textPosition) {\n        case 'top-left':\n          return css`\n            top: 0;\n            left: 0;\n            transform: translate(-50%, -50%);\n          `\n        case 'top-right':\n          return css`\n            top: 0;\n            right: 0;\n            transform: translate(50%, -50%);\n          `\n        case 'bottom-left':\n          return css`\n            bottom: 0;\n            left: 0;\n            transform: translate(-50%, 50%);\n          `\n        case 'bottom-right':\n          return css`\n            bottom: 0;\n            right: 0;\n            transform: translate(50%, 50%);\n          `\n      }\n    }}\n  }\n\n  > .text {\n    color: #262626;\n    z-index: 1;\n    order: ${(p) => (isTop(p) ? 0 : 1)};\n    text-align: ${(p) => (isLeft(p) ? 'left' : 'right')};\n    padding: ${(p) => (isTop(p) ? '15px 15px 10px 15px' : '10px 15px 10px 15px')};\n\n    @media (min-width: ${ms.LAPTOP_L}px) {\n      padding: ${(p) => (isTop(p) ? '30px 40px 10px 40px' : '10px 40px 30px 40px')};\n    }\n\n    > .h-wrapper {\n      height: 34px;\n      margin-top: 5px;\n      width: 95%;\n      position: relative;\n      margin-left: ${(p) => (isLeft(p) ? '0' : '15%')};\n      @media (min-width: ${ms.LAPTOP_L}px) {\n        height: 46px;\n      }\n      > h3 {\n        position: absolute;\n        left: 0;\n        top: 0;\n        height: 100%;\n        width: 100%;\n        margin: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        ${ty([26, 0.46, 34], 'Cormorant Garamond', '500')}\n        @media (min-width: ${ms.LAPTOP_L}px) {\n          ${ty([32, 0.62, 46])}\n        }\n      }\n    }\n\n\n    > p {\n      height: 40px;\n      margin-bottom: 10px;\n      width: 85%;\n      margin-left: ${(p) => (isLeft(p) ? '0' : '15%')};\n      ${ty([13, 0.39, 20], 'Open Sans')}\n      overflow: hidden;\n      text-overflow: ellipsis;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n      @media (min-width: ${ms.LAPTOP_L}px) {\n        ${ty([18, 0.54, 24])}\n        height: 48px;\n        margin-bottom: 15px;\n      }\n    }\n\n    > span {\n      height: 20px;\n      color: #262626;\n      &:hover {\n        color: #262626;\n      }\n      ${ty([16, 0.51, 20], 'Cormorant Garamond', 'bold', 'italic')}\n      @media (min-width: ${ms.LAPTOP_L}px) {\n        ${ty([18, 0.34, 26])}\n        height: 26px;\n      }\n      text-decoration: none;\n      > svg {\n        margin-left: 10px;\n      }\n    }\n  }\n\n  > .img-wrapper {\n    margin: ${(p) => (isLeft(p) ? '0 0 0 15px' : '0 15px 0 0')};\n    @media (min-width: ${ms.LAPTOP_L}px) {\n      margin: ${(p) => (isLeft(p) ? '0 0 0 40px' : '0 40px 0 0')};\n    }\n    > img {\n      width: 100%;\n      display: block;\n    }\n  }\n`\n","\n  const { hot } = require(\"react-hot-loader/root\")\n  import Component from \"/opt/build/repo/src/theme/organisms/CategoryBanner/index.ts\"\n\n  export default hot(Component)\n  "],"names":["Arrow","props","color","width","height","viewBox","version","xmlns","id","stroke","strokeWidth","fill","fillRule","transform","d","colors","Gelb","Grün","Blau","Orange","CategoryBanner","useLazyImageSrc","context","optImg","base64","ref","image","useInView","wrapperRef","inView","wasInView","React","current","eecTrack","actions","Wrapper","onClick","textPosition","bg","backgroundColor","to","link","className","title","subtitle","linktext","src","alt","isLeft","p","isTop","styled","Link","ms","css","ty","hot","require","Component"],"sourceRoot":""}