{"version":3,"file":"Articles-I7AQtuRB.js","sources":["../../../app/javascript/components/organisms/article/Articles.tsx"],"sourcesContent":["import { useState, useRef, memo } from 'react'\n\nimport { ArticlesSlider } from './ArticlesSlider'\n\nimport { wordpressBaseURL } from '@/utils/constants'\n\nimport axios from 'axios'\nimport HybridLink from '@/components/atoms/widgets/HybridLink'\nimport useSSR from '@/hooks/useSSR'\nimport chavironLeft from '../../../../assets/images/chevron-left.svg'\nimport chavironBlue from '../../../../assets/images/chevron-blue.svg'\nimport './styles.css'\n\ntype ArticleSectionProps = {\n  articles: schema.Articles[]\n  article_categories: schema.ArticleCategories[]\n}\n\nfunction Articles({ ...props }: ArticleSectionProps) {\n  const isSSR = useSSR()\n\n  const { articles, article_categories } = props\n\n  const [activeFilter, setActiveFilter] = useState(article_categories ? article_categories[0] : '')\n  const [articlesToShow, setArticlesToShow] = useState(articles)\n  const containerRef = useRef(null)\n\n  const getArticles = async (title) => {\n    try {\n      const response = await axios.get('homepage/articles', {\n        params: { category: title }\n      })\n\n      setArticlesToShow(response.data)\n    } catch (error) {\n      console.error('Error fetching data:', error)\n    }\n  }\n\n  return (\n    <>\n      {isSSR ? (\n        <div className=\"flex justify-center\">Loading...</div>\n      ) : (\n        <>\n          <div className='w-[329px] sm:w-auto mx-auto flex flex-col 2xl:mx-auto max-w-[1320px] md:px-20 lg:px-44 xl:px-44'>\n            <h2 className='sm:text-[1.75rem] xl:text-[2.375rem] text-[38px] font-extrabold -tracking-[0.5px] mb-[8px] md:mb-[27px]'>News</h2>\n            <p className='text-[18px] sm:text-[0.7rem] md:text-lg font-semibold mb-[13px] md:mb-[30px] lg:w-[80%]'>Read the talent community's ultimate source for breaking industry news, top-notch practices, and insights from your peers.</p>\n            <div className=\"flex w-full flex-col-reverse gap-[19px] md:flex-row flex-start justify-between\">\n              <div className='flex flex-start justify-between w-[100%] overflow-scroll scrollbar-none rounded-lg category-section-container'>\n                <img src={chavironLeft} alt=\"prev\" loading='lazy' className=\"block xl:hidden h-[15px] w-[15px] mr-4 sm:mt-[0.35rem] mt-[0.1rem] ml-[-2.3px] sm:ml-0\" onClick={() => { containerRef.current.scrollLeft -= 200 }} />\n                <div className=\"flex w-full gap-0 sm:gap-4 overflow-x-auto scrollbar-none\" ref={containerRef}>\n                  <div className=\"xl:hidden flex gradient-left\"></div>\n                  {article_categories.map((title, index) => (\n                    <span\n                      key={index}\n                      className={`${title === activeFilter ? 'bg-[#f3f3f3] rounded-lg font-extrabold' : ''} flex items-center px-3 py-1 mb-[29px] sm:md-[50px] md:mb-[46px]`}\n                      onClick={() => { \n                        setActiveFilter(title)\n                        getArticles(title)\n                      }}\n                    >\n                      <p className={`cursor-pointer text-[12px] sm:text-[0.875rem] text-black-100 hover:font-extrabold whitespace-nowrap`}>{title}</p>\n                    </span>\n                  ))}\n                </div>\n                <div className=\"xl:hidden flex gradient-right\"></div>\n                <img src={chavironLeft} alt=\"next\" loading='lazy' className=\"block xl:hidden h-[15px] w-[15px] rotate-180 sm:mt-[0.35rem] mt-[0.1rem] ml-4\" onClick={() => { containerRef.current.scrollLeft += 200 }} />\n              </div>\n              <div className=\"hidden md:flex gap-1 items-center pr-[1rem] xl:pr-[9px] mt-[3px] sm:mt-0 mb-[46px]\">\n                <HybridLink href={wordpressBaseURL + 'topics/'} className=\"text-xs sm:text-sm sm:font-medium cursor-pointer text-[#11D0B0] whitespace-nowrap\">View All Articles</HybridLink>\n                <img className=\"h-1.5 w-1.5 sm:h-[0.6rem] sm:w-[0.6rem] sm:mt-[0.2rem] sm:ml-[0.2rem] self-center\" src={chavironBlue} alt=\"arrow\" loading='lazy' />\n              </div>\n              <div className=\"md:hidden flex gap-1 items-center pr-[1rem] xl:pr-[9px] mt-[3px] sm:mt-0\">\n                <HybridLink href={wordpressBaseURL + 'topics/'} className=\"text-[17px] sm:text-sm sm:font-medium cursor-pointer text-[#11D0B0] whitespace-nowrap\">View All Topics</HybridLink>\n                <img className=\"h-1.5 w-1.5 sm:h-[0.6rem] sm:w-[0.6rem] sm:mt-[0.2rem] sm:ml-[0.2rem] self-center\" src={chavironBlue} alt=\"arrow\" loading='lazy' />\n              </div>\n            </div>\n          </div>\n          <ArticlesSlider articles={articlesToShow} showGradient={true} />\n        </>\n      )}\n    </>\n  )\n}\n\nexport default memo(Articles)\n"],"names":["Articles","props","isSSR","useSSR","articles","article_categories","activeFilter","setActiveFilter","useState","articlesToShow","setArticlesToShow","containerRef","useRef","getArticles","title","response","axios","get","params","category","data","error","_Fragment","children","_jsx","className","_jsxs","src","chavironLeft","alt","loading","onClick","current","scrollLeft","ref","map","index","HybridLink","href","wordpressBaseURL","chavironBlue","ArticlesSlider","showGradient","memo"],"mappings":"0NAkBA,SAASA,EAAS,CAAE,GAAGC,CAA2B,EAAG,CACnD,MAAMC,EAAQC,IAER,CAAEC,SAAAA,EAAUC,mBAAAA,CAAuBJ,EAAAA,EAEnC,CAACK,EAAcC,CAAe,EAAIC,WAASH,EAAqBA,EAAmB,CAAC,EAAI,EAAE,EAC1F,CAACI,EAAgBC,CAAiB,EAAIF,WAASJ,CAAQ,EACvDO,EAAeC,SAAO,IAAI,EAE1BC,EAAc,MAAOC,GAAU,CAC/B,GAAA,CACF,MAAMC,EAAW,MAAMC,EAAMC,IAAI,oBAAqB,CACpDC,OAAQ,CAAEC,SAAUL,CAAM,CAAA,CAC3B,EAEDJ,EAAkBK,EAASK,IAAI,QACxBC,EAAO,CACNA,QAAAA,MAAM,uBAAwBA,CAAK,CAC7C,CAAA,EAGF,SACEC,EAAA,CAAAC,SACGrB,EACCsB,EAAA,MAAA,CAAKC,UAAU,sBAAqBF,SAAC,YAAA,CAAe,EAEpDG,EAAAJ,EAAA,CAAAC,UACEG,EAAA,MAAA,CAAKD,UAAU,kGAAiGF,UAC9GC,EAAA,KAAA,CAAIC,UAAU,0GAAyGF,SAAC,MAAA,CAAQ,EAChIC,EAAA,IAAA,CAAGC,UAAU,0FAAyFF,SAAC,4HAAA,CAA6H,EACpOG,EAAA,MAAA,CAAKD,UAAU,iFAAgFF,UAC7FG,EAAA,MAAA,CAAKD,UAAU,gHAA+GF,UAC5HC,EAAA,MAAA,CAAKG,IAAKC,EAAcC,IAAI,OAAOC,QAAQ,OAAOL,UAAU,yFAAyFM,QAASA,IAAM,CAAEpB,EAAaqB,QAAQC,YAAc,GAAI,CAAA,CAAI,EACjNP,EAAA,MAAA,CAAKD,UAAU,4DAA4DS,IAAKvB,EAAaY,UAC3FC,EAAA,MAAA,CAAKC,UAAU,8BAAA,CAAoC,EAClDpB,EAAmB8B,IAAI,CAACrB,EAAOsB,MAC9B,OAAA,CAEEX,UAAY,GAAEX,IAAUR,EAAe,yCAA2C,EAAG,mEACrFyB,QAASA,IAAM,CACbxB,EAAgBO,CAAK,EACrBD,EAAYC,CAAK,CACnB,EAAES,WAEF,IAAA,CAAGE,UAAY,sGAAqGF,SAAET,CAAAA,CAAS,CAAA,EAP1HsB,CAQD,CACP,CAAC,CAAA,CACC,EACLZ,EAAA,MAAA,CAAKC,UAAU,+BAAA,CAAqC,EACpDD,EAAA,MAAA,CAAKG,IAAKC,EAAcC,IAAI,OAAOC,QAAQ,OAAOL,UAAU,gFAAgFM,QAASA,IAAM,CAAEpB,EAAaqB,QAAQC,YAAc,GAAI,CAAA,CAAI,CAAC,CAAA,CACtM,EACLP,EAAA,MAAA,CAAKD,UAAU,qFAAoFF,SAAA,CACjGC,EAACa,EAAU,CAACC,KAAMC,EAAmB,UAAWd,UAAU,oFAAmFF,SAAC,mBAAA,CAA6B,EAC3KC,EAAA,MAAA,CAAKC,UAAU,oFAAoFE,IAAKa,EAAcX,IAAI,QAAQC,QAAQ,MAAA,CAAQ,CAAC,CAAA,CAChJ,EACLJ,EAAA,MAAA,CAAKD,UAAU,2EAA0EF,SAAA,CACvFC,EAACa,EAAU,CAACC,KAAMC,EAAmB,UAAWd,UAAU,wFAAuFF,SAAC,iBAAA,CAA2B,EAC7KC,EAAA,MAAA,CAAKC,UAAU,oFAAoFE,IAAKa,EAAcX,IAAI,QAAQC,QAAQ,MAAA,CAAQ,CAAC,CAAA,CAChJ,CAAC,CAAA,CACH,CAAC,CAAA,CACH,EACLN,EAACiB,EAAc,CAACrC,SAAUK,EAAgBiC,aAAc,EAAA,CAAO,CAAC,CAAA,CAChE,CAAA,CAEJ,CAEN,CAEA,MAAeC,EAAAA,EAAAA,KAAK3C,CAAQ"}