{"ast":null,"code":"import _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport { Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nimport cn from 'classnames';\nimport { Arrow } from 'components/gui/Arrow';\nimport BoxButton from 'components/gui/BoxButton';\nimport Button from 'components/gui/Button';\nimport SlideshowInline from 'components/slideshowInline/SlideshowInline';\nimport useLocale from 'contexts/useLocale';\nimport gsap from 'gsap';\nimport { useClientWidth } from 'hooks/useClientSize';\nimport { useIsDesktop } from 'hooks/useIsDevice';\nimport { getLastPosts } from 'lib/instagram';\nimport { useRef, useState } from 'react';\nimport SliceIntro from 'slices/SliceIntro/SliceIntro';\nimport styles from './NewsListSlice.module.scss'; // Mobile\n\nvar Slide = function Slide(_ref) {\n  var news = _ref.news,\n      className = _ref.className,\n      color = _ref.color;\n  //const imageURL = data.image && imageBuilder.image(data.image.asset).width(400).url()\n  var locale = useLocale();\n  return /*#__PURE__*/_jsx(\"li\", {\n    className: cn(styles.itemContainer, className),\n    children: /*#__PURE__*/_jsxs(\"div\", {\n      className: cn(styles.item),\n      style: {\n        background: color\n      },\n      children: [/*#__PURE__*/_jsx(\"div\", {\n        className: cn(styles.title),\n        children: /*#__PURE__*/_jsx(\"h3\", {\n          className: cn('h--3'),\n          children: news.title\n        })\n      }), /*#__PURE__*/_jsx(\"div\", {\n        className: cn(styles.imageCont),\n        children: /*#__PURE__*/_jsx(\"img\", {\n          src: 'https://www.colivingfactory.com/assets/coresider/images/1.png',\n          className: styles.image\n        })\n      }), /*#__PURE__*/_jsx(BoxButton, {\n        className: cn(styles.button),\n        label: locale('see-on-instagram'),\n        fullWidth: true,\n        href: 'https://www.instagram.com/colivingfactory',\n        white: true // icon='right'\n\n      })]\n    })\n  });\n};\n\nvar colorsMobile = ['#8E95BD', '#F1CDCD', '#AFB8A6', '#742521'];\n\nvar NewsSlideshow = function NewsSlideshow(_ref2) {\n  var news = _ref2.news,\n      introText = _ref2.introText;\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: cn('mobile-only', styles.newsSlideshow),\n    children: [/*#__PURE__*/_jsx(\"div\", {\n      className: cn(styles.intro),\n      children: /*#__PURE__*/_jsx(\"h3\", {\n        children: introText\n      })\n    }), /*#__PURE__*/_jsx(SlideshowInline, {\n      items: news,\n      renderItem: function renderItem(item, itemStyle, i) {\n        return /*#__PURE__*/_jsx(Slide, {\n          className: itemStyle,\n          news: item,\n          color: colorsMobile[i % colorsMobile.length]\n        }, item._id + '-' + i);\n      }\n    })]\n  });\n}; // Desktop\n\n\nvar NewsListItem = function NewsListItem(_ref3) {\n  var news = _ref3.news,\n      color = _ref3.color;\n  return /*#__PURE__*/_jsxs(\"li\", {\n    className: cn(styles.item),\n    style: {\n      background: color\n    },\n    children: [/*#__PURE__*/_jsx(\"div\", {\n      className: cn(styles.square, styles.title),\n      children: /*#__PURE__*/_jsx(\"h3\", {\n        className: cn('h--2'),\n        children: news.title\n      })\n    }), /*#__PURE__*/_jsx(\"div\", {\n      className: cn(styles.square, styles.imageCont),\n      children: /*#__PURE__*/_jsx(\"img\", {\n        src: 'https://www.colivingfactory.com/assets/coresider/images/1.png',\n        className: styles.image\n      })\n    })]\n  });\n};\n\nvar ListArrow = function ListArrow(_ref4) {\n  var onClick = _ref4.onClick,\n      right = _ref4.right;\n  return /*#__PURE__*/_jsx(\"div\", {\n    className: cn(styles.arrowButtonCont, right && styles.arrowButtonContRight),\n    children: /*#__PURE__*/_jsxs(Button, {\n      onClick: onClick,\n      className: cn(styles.arrowButton),\n      children: [right && /*#__PURE__*/_jsx(Arrow, {\n        size: \"large\",\n        direction: \"right\"\n      }), !right && /*#__PURE__*/_jsx(Arrow, {\n        size: \"large\",\n        direction: \"left\"\n      })]\n    })\n  });\n};\n\nvar colorsDesktop = ['#BCC8CC', '#F1CDCD', '#AFB8A6', '#742521'];\nvar showing = 4;\n\nvar NewsList = function NewsList(_ref5) {\n  var news = _ref5.news,\n      introText = _ref5.introText;\n\n  var _useState = useState(0),\n      index = _useState[0],\n      setIndex = _useState[1];\n\n  var listRef = useRef();\n  var clientWidth = useClientWidth();\n  var itemWidth = clientWidth / 4;\n\n  var handleClick = function handleClick(inc) {\n    var newIndex = index + inc;\n\n    if (newIndex >= 0 && newIndex <= news.length - showing) {\n      var tl = gsap.timeline();\n      tl.to(listRef.current, {\n        duration: 0.3,\n        ease: 'power3.inOut',\n        x: -newIndex * itemWidth\n      });\n      setIndex(newIndex);\n    }\n  };\n\n  var displayArrows = news.length > showing;\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: /*#__PURE__*/_jsxs(\"div\", {\n      className: cn(styles.listContainer),\n      children: [/*#__PURE__*/_jsx(\"ul\", {\n        ref: listRef,\n        className: styles.list,\n        style: {\n          width: itemWidth * news.length\n        },\n        children: news.map(function (news, i) {\n          return /*#__PURE__*/_jsx(_Fragment, {\n            children: /*#__PURE__*/_jsx(NewsListItem, {\n              news: news,\n              color: colorsDesktop[i % colorsDesktop.length]\n            }, news._id + '-' + i)\n          });\n        })\n      }), displayArrows && index > 0 && /*#__PURE__*/_jsx(ListArrow, {\n        onClick: function onClick() {\n          return handleClick(-1);\n        }\n      }), displayArrows && index < news.length - showing && /*#__PURE__*/_jsx(ListArrow, {\n        onClick: function onClick() {\n          return handleClick(1);\n        },\n        right: true\n      })]\n    })\n  });\n};\n\nvar NewsListSlice = function NewsListSlice(props) {\n  var id = props.id,\n      introText = props.introText,\n      rest = _objectWithoutProperties(props, [\"id\", \"introText\"]);\n\n  var isDesktop = useIsDesktop(); // const instaData = getLastPosts()\n\n  return /*#__PURE__*/_jsxs(\"section\", {\n    id: id || 'news',\n    className: cn(styles.newsSlice),\n    children: [/*#__PURE__*/_jsx(SliceIntro, {\n      text: introText\n    }), isDesktop ? /*#__PURE__*/_jsx(NewsList, _objectSpread({}, rest)) : /*#__PURE__*/_jsx(NewsSlideshow, _objectSpread({}, rest))]\n  });\n};\n\nexport default NewsListSlice;","map":null,"metadata":{},"sourceType":"module"}