{"version":3,"sources":["webpack:///./src/app/components/YouMayLike.js"],"names":["Skeleton","aside","gridArea","w","maxWidth","m","position","sm","lg","top","h4","text","pb","mb","borderWidth","borderStyle","borderColor","article","key","display","spaceX","to","div","flex","h6","p","color","my","lazy","width","shape","noImage","NoImage","py","mt","YouMayLike","props","articles","filter","uuid","slice","map","index","arr","length","getCanonical","visitorId","sessionId","section","source","getTeaser","author","image","getImage","getImageSize","alt","images","caption"],"mappings":"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","file":"static/js/components-YouMayLike.9aa5cd7b.chunk.js","sourcesContent":["/* global IntersectionObserver */\nimport React, { Fragment } from 'react'\nimport { x } from '@xstyled/styled-components'\nimport { getImageSize, getImage, getTeaser, getCanonical } from '../../lib/articleUtils'\nimport { formatAgo } from '../../lib/dateUtils'\nimport StyledLink from '../components/ui/Link'\nimport ImageOrNoImage from './ui/Image'\nimport NoImage from '../../../assets/images/general/no-image.png'\n\nexport const Skeleton = () => (\n  <x.aside gridArea='articles' w='100%' maxWidth='550px' m='0 auto' position={{ sm: 'block', lg: 'sticky' }} top={{ sm: '0', lg: '10px' }}>\n    <x.h4 text='h4' pb={20} mb={20} borderWidth='0 0 1px 0' borderStyle='solid' borderColor='divider'>You may like</x.h4>\n    <x.article key={0} pb={20} borderWidth='0 0 1px 0' borderStyle='solid' borderColor='divider'>\n      <StyledLink display='flex' spaceX={10} to='#'>\n        <x.div flex='1 1 0'>\n          <x.h6 text='h6'>Loading...</x.h6>\n          <x.p text='meta' color='meta' my={8}>By ...</x.p>\n        </x.div>\n        <x.div>\n          <ImageOrNoImage lazy='lazy' width={80} shape='square' noImage={NoImage} />\n        </x.div>\n      </StyledLink>\n    </x.article>\n    <x.article key={1} py={20} borderWidth='0 0 1px 0' borderStyle='solid' borderColor='divider'>\n      <StyledLink display='flex' spaceX={10} to='#'>\n        <x.div flex='1 1 0'>\n          <x.h6 text='h6'>Loading...</x.h6>\n          <x.p text='meta' color='meta' my={8}>By ...</x.p>\n        </x.div>\n        <x.div>\n          <ImageOrNoImage lazy='lazy' width={80} shape='square' noImage={NoImage} />\n        </x.div>\n      </StyledLink>\n    </x.article>\n    <x.article key={2} py={20} borderWidth='0 0 1px 0' borderStyle='solid' borderColor='divider'>\n      <StyledLink display='flex' spaceX={10} to='#'>\n        <x.div flex='1 1 0'>\n          <x.h6 text='h6'>Loading...</x.h6>\n          <x.p text='meta' color='meta' my={8}>By ...</x.p>\n        </x.div>\n        <x.div>\n          <ImageOrNoImage lazy='lazy' width={80} shape='square' noImage={NoImage} />\n        </x.div>\n      </StyledLink>\n    </x.article>\n    <x.h4 text='h4' pb={20} mb={20} mt={50} borderWidth='0 0 1px 0' borderStyle='solid' borderColor='divider'>Read next</x.h4>\n    <x.article key={3} pb={20} borderWidth='0 0 1px 0' borderStyle='solid' borderColor='divider'>\n      <StyledLink display='flex' spaceX={10} to='#'>\n        <x.div flex='1 1 0'>\n          <x.h6 text='h6'>Loading...</x.h6>\n          <x.p text='meta' color='meta' my={8}>By ...</x.p>\n        </x.div>\n        <x.div>\n          <ImageOrNoImage lazy='lazy' width={100} shape='square' noImage={NoImage} />\n        </x.div>\n      </StyledLink>\n    </x.article>\n  </x.aside>\n)\n\nconst YouMayLike = (props) => {\n  const count = 4\n  const clickSource = 'You May Like'\n  return (\n    <div>\n      {props.articles &&\n        <x.aside gridArea='articles' w='100%' maxWidth='550px' m='0 auto' position={{ sm: 'block', lg: 'sticky' }} top={{ sm: '0', lg: '10px' }}>\n          <x.h4 text='h4' pb={20} borderWidth='0 0 1px 0' borderStyle='solid' borderColor='divider'>You may like</x.h4>\n          {props.articles.filter(article => article.uuid !== props.uuid).slice(0, count).map((article, index, arr) => (\n            <Fragment key={index}>\n              {index < arr.length - 1 && article &&\n                <x.article py={20} borderWidth='0 0 1px 0' borderStyle='solid' borderColor='divider'>\n                  <StyledLink display='flex' spaceX={10} to={getCanonical(article)} visitorId={props.visitorId} sessionId={props.sessionId} section={props.section} source={clickSource}>\n                    <x.div flex='1 1 0'>\n                      <x.h6 text='h6'>{getTeaser(article)}</x.h6>\n                      <x.p text='meta' color='meta' my={8}>By {article.author}</x.p>\n                    </x.div>\n                    <x.div>\n                      <ImageOrNoImage lazy='lazy' image={getImage(article)} w={{ sm: '50px', lg: '80px' }} mb={10} width={getImageSize('80')} alt={article.images && article.images[0].caption} shape='square' noImage={NoImage} />\n                    </x.div>\n                  </StyledLink>\n                </x.article>}\n              {index === arr.length - 1 &&\n                <>\n                  <x.h4 text='h4' pb={20} mb={20} mt={50} borderWidth='0 0 1px 0' borderStyle='solid' borderColor='divider'>Read next</x.h4>\n                  <x.article pb={20} borderWidth='0 0 1px 0' borderStyle='solid' borderColor='divider'>\n                    <StyledLink display='flex' spaceX={10} to={getCanonical(article)} visitorId={props.visitorId} sessionId={props.sessionId} section={props.section} source={clickSource}>\n                      <x.div flex='1 1 0'>\n                        <x.h6 text='h6'>{getTeaser(article)}</x.h6>\n                        <x.p text='meta' color='meta' my={8}>By {article.author}</x.p>\n                      </x.div>\n                      <x.div>\n                        <ImageOrNoImage lazy='lazy' image={getImage(article)} w={{ sm: '50px', lg: '80px' }} mb={10} width={getImageSize('normal')} alt={article.images && article.images[0].caption} shape='square' noImage={NoImage} />\n                      </x.div>\n                    </StyledLink>\n                  </x.article>\n                </>}\n            </Fragment>\n          ))}\n        </x.aside>}\n    </div>\n  )\n}\n\nexport default YouMayLike\n"],"sourceRoot":""}