{"ast":null,"code":"import { 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\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = 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\nconst Slide = ({\n  news,\n  className,\n  color\n}) => {\n  //const imageURL = data.image && imageBuilder.image(data.image.asset).width(400).url()\n  const 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\nconst colorsMobile = ['#8E95BD', '#F1CDCD', '#AFB8A6', '#742521'];\n\nconst NewsSlideshow = ({\n  news,\n  introText\n}) => {\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: (item, itemStyle, i) => /*#__PURE__*/_jsx(Slide, {\n        className: itemStyle,\n        news: item,\n        color: colorsMobile[i % colorsMobile.length]\n      }, item._id + '-' + i)\n    })]\n  });\n}; // Desktop\n\n\nconst NewsListItem = ({\n  news,\n  color\n}) => {\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\nconst ListArrow = ({\n  onClick,\n  right\n}) => {\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\nconst colorsDesktop = ['#BCC8CC', '#F1CDCD', '#AFB8A6', '#742521'];\nconst showing = 4;\n\nconst NewsList = ({\n  news,\n  introText\n}) => {\n  const {\n    0: index,\n    1: setIndex\n  } = useState(0);\n  const listRef = useRef();\n  const clientWidth = useClientWidth();\n  const itemWidth = clientWidth / 4;\n\n  const handleClick = inc => {\n    const newIndex = index + inc;\n\n    if (newIndex >= 0 && newIndex <= news.length - showing) {\n      const 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  const 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((news, i) => /*#__PURE__*/_jsx(_Fragment, {\n          children: /*#__PURE__*/_jsx(NewsListItem, {\n            news: news,\n            color: colorsDesktop[i % colorsDesktop.length]\n          }, news._id + '-' + i)\n        }))\n      }), displayArrows && index > 0 && /*#__PURE__*/_jsx(ListArrow, {\n        onClick: () => handleClick(-1)\n      }), displayArrows && index < news.length - showing && /*#__PURE__*/_jsx(ListArrow, {\n        onClick: () => handleClick(1),\n        right: true\n      })]\n    })\n  });\n};\n\nconst NewsListSlice = props => {\n  const {\n    id,\n    introText\n  } = props,\n        rest = _objectWithoutProperties(props, [\"id\", \"introText\"]);\n\n  const 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"}