{"version":3,"file":"component---src-dynamic-pages-blogs-index-js-d8d6ada34f6e6567ad78.js","mappings":"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","sources":["webpack://gatsby-starter-default/./src/dynamic-pages/blogs-index.js","webpack://gatsby-starter-default/./src/assets/image/orange-circle.svg","webpack://gatsby-starter-default/./src/assets/image/orange-search.svg"],"sourcesContent":["import * as React from \"react\"\nimport { useState } from \"react\"\nimport CircleOrange from \"../assets/image/orange-circle.svg\"\nimport SearchOrange from \"../assets/image/orange-search.svg\"\n\nimport Card from \"../components/Card\"\nimport Layout from \"../components/layout\"\nimport { MultiLangBody, MultiLangField } from \"skillstrainer-resource-library\"\n\nconst BlogsIndex = ({ pageContext }) => {\n  const { key } = pageContext\n\n  const tag = require(\"../assets/data/tags.json\")\n  const categories = require(\"../assets/data/categories.json\")\n  const blogPosts = require(\"../assets/data/blogsContent.json\")\n  // const strapiJson = require(\"../assets/data/strapiContent.json\")\n\n  const [searchTerm, _setSearchTerm] = useState(\n    (typeof localStorage !== \"undefined\" &&\n      localStorage.getItem(\"searchTerm\")) ||\n      \"\"\n  )\n  const setSearchTerm = keywords => {\n    _setSearchTerm(keywords)\n  }\n\n  const [selectedTags, setSelectedTags] = useState([])\n  const toggleTag = tag => {\n    const tagIndex = selectedTags.indexOf(tag)\n    if (tagIndex > -1) setSelectedTags(selectedTags.filter(e => e != tag))\n    else setSelectedTags([...selectedTags, tag])\n  }\n\n  const [selectedCategory, setSelectedCategory] = useState(\"\")\n\n  const visibleBlogPosts = blogPosts.data.filter(\n    post =>\n      // check search term\n      (!searchTerm ||\n        JSON.stringify(post)\n          .toLowerCase()\n          .includes(searchTerm.toLowerCase())) &&\n      // check category\n      (!selectedCategory ||\n        post.attributes.blog_category.id === selectedCategory) &&\n      // check tags\n      (!selectedTags.length ||\n        selectedTags.find(tag => post.attributes.tag.includes(tag)))\n  )\n  function mycard(val) {\n    return (\n      <Card\n        url={val.attributes.url}\n        img={\n          val.attributes.thumbnail?.data[0].attributes?.formats.medium?.url ||\n          val.attributes.thumbnail?.data[0].attributes?.url\n        }\n        category={val.attributes.blog_category.data.attributes.name}\n        title={val.attributes.title}\n        description={val.attributes.contents[0]?.content}\n        author_name={val.attributes.author?.data?.attributes.name}\n        author_thumbnail={\n          val?.attributes?.author?.data?.attributes?.thumbnail?.data?.[0]\n            ?.attributes?.formats?.thumbnail?.url ||\n          val?.attributes?.author?.data?.attributes?.thumbnail?.data?.[0]\n            ?.attributes?.url\n        }\n        published={val.attributes.publishedAt}\n      />\n    )\n  }\n\n  return (\n    <MultiLangBody _key={key}>\n      <Layout>\n        <div className=\"blog pt-40 content mx-auto\">\n          <div className=\"max-w-max mx-auto relative\">\n            <img src={CircleOrange} className=\"absolute -top-10 -left-16\" />\n            <p className=\"green-dark text-4xl font-semibold\">\n              <MultiLangField name={\"blogs\"}>Blogs</MultiLangField>\n            </p>\n          </div>\n          <div className=\"py-12 pt-6\">\n            <div className=\"flex flex-col lg:flex-row items-start w-full\">\n              <div className=\"blog-left my-6 flex flex-row items-start justify-end md:justify-between lg:flex-col lg:justify-start\">\n                <div className=\"relative bg-white border rounded-lg p-5 text-sm ml-5 mr-5 md:ml-6 lg:ml-0 w-full md:w-1/4 lg:w-full\">\n                  <input\n                    type=\"text\"\n                    className=\"outline\"\n                    onChange={e => setSearchTerm(e.target.value)}\n                    placeholder=\"Search\"\n                    value={searchTerm}\n                  />\n                  <img src={SearchOrange} className=\"absolute top-5 right-4\" />\n                </div>\n                <div className=\"lg:w-full lg:my-10 text-md text w-1/4 hidden md:block\">\n                  <p className=\"font-semibold\">\n                    <MultiLangField name={\"categories\"}>\n                      Categories\n                    </MultiLangField>\n                  </p>\n                  <div className=\"my-1 lg:my-0 overflow-auto scroll\">\n                    <ul className=\"my-3\">\n                      {categories.map(category => {\n                        console.log(category)\n                        const isSelected = selectedCategory === category.id\n                        return (\n                          <li\n                            onClick={() =>\n                              setSelectedCategory(isSelected ? \"\" : category.id)\n                            }\n                            className={\n                              (isSelected && \"nav-link-active\") +\n                              \" cursor-pointer\"\n                            }\n                          >\n                            {category.attributes.name}\n                          </li>\n                        )\n                      })}\n                    </ul>\n                  </div>\n                </div>\n                <div className=\"md:w-1/4 lg:w-full hidden md:block\">\n                  <p className=\"font-semibold mb-3\">\n                    <MultiLangField name={\"popular-tags\"}>\n                      Popular Tags\n                    </MultiLangField>\n                  </p>\n                  <div className=\"lg:w-full flex flex-wrap overflow-auto scroll\">\n                    {tag.map(tag => {\n                      return (\n                        <div\n                          className={\n                            \"bg-green-light2 rounded-full py-2 px-3 text-sm blue-dark2 tag m-1\" +\n                            (selectedTags.includes(tag) ? \" active\" : \"\")\n                          }\n                          onClick={() => toggleTag(tag)}\n                        >\n                          {tag}\n                        </div>\n                      )\n                    })}\n                  </div>\n                </div>\n              </div>\n              <div className=\"w-full flex p-4 lg:pl-10 flex-wrap justify-center grid grid-cols-1 md:grid-cols-2 3xl:grid-cols-3\">\n                {visibleBlogPosts.map(mycard)}\n              </div>\n            </div>\n          </div>\n        </div>\n      </Layout>\n    </MultiLangBody>\n  )\n}\n\nexport default BlogsIndex\n","export default \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQ1Ljg3MiIgaGVpZ2h0PSIyNDUuODcyIiB2aWV3Qm94PSIwIDAgMjQ1Ljg3MiAyNDUuODcyIj48ZGVmcz48c3R5bGU+LmF7b3BhY2l0eTowLjI2O2ZpbGw6dXJsKCNhKTt9PC9zdHlsZT48bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSIwLjUiIHkxPSIxIiB4Mj0iMC41IiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZTc2ZjUxIi8+PHN0b3Agb2Zmc2V0PSIwLjE4IiBzdG9wLWNvbG9yPSIjZTQ2ZTUwIiBzdG9wLW9wYWNpdHk9IjAuNTg4Ii8+PHN0b3Agb2Zmc2V0PSIwLjM2OCIgc3RvcC1jb2xvcj0iI2UyNmQ0ZiIgc3RvcC1vcGFjaXR5PSIwLjI5Ii8+PHN0b3Agb2Zmc2V0PSIwLjYxOSIgc3RvcC1jb2xvcj0iI2UxNmM0ZiIgc3RvcC1vcGFjaXR5PSIwLjE0MSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2RmNmI0ZSIgc3RvcC1vcGFjaXR5PSIwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGVsbGlwc2UgY2xhc3M9ImEiIGN4PSI4OS41OSIgY3k9Ijg5LjU5IiByeD0iODkuNTkiIHJ5PSI4OS41OSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQ1Ljg3MiAxNTMuNTg3KSByb3RhdGUoMTQ5KSIvPjwvc3ZnPg==\"","export default \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMi4yNTMiIGhlaWdodD0iMjMuNTA0IiB2aWV3Qm94PSIwIDAgMjIuMjUzIDIzLjUwNCI+PGRlZnM+PHN0eWxlPi5he29wYWNpdHk6MC41Njt9LmJ7ZmlsbDojZmZmO30uYiwuY3tzdHJva2U6I2YzMDtzdHJva2Utd2lkdGg6M3B4O30uYywuZXtmaWxsOm5vbmU7fS5je3N0cm9rZS1saW5lY2FwOnJvdW5kO30uZHtzdHJva2U6bm9uZTt9PC9zdHlsZT48L2RlZnM+PGcgY2xhc3M9ImEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMTMgLTgzMy44MDYpIj48ZyBjbGFzcz0iYiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjEzIDgzMy44MDYpIj48Y2lyY2xlIGNsYXNzPSJkIiBjeD0iMTAiIGN5PSIxMCIgcj0iMTAiLz48Y2lyY2xlIGNsYXNzPSJlIiBjeD0iMTAiIGN5PSIxMCIgcj0iOC41Ii8+PC9nPjxwYXRoIGNsYXNzPSJjIiBkPSJNMTY2NS4zMyw3MzcuMDQybDMuODA2LDQuMzQ1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQzNiAxMTMuODA2KSIvPjwvZz48L3N2Zz4=\""],"names":["_ref","pageContext","key","tag","require","categories","blogPosts","searchTerm","_setSearchTerm","useState","localStorage","getItem","selectedTags","setSelectedTags","selectedCategory","setSelectedCategory","visibleBlogPosts","data","filter","post","JSON","stringify","toLowerCase","includes","attributes","blog_category","id","length","find","React","MultiLangBody","_key","Layout","className","src","MultiLangField","name","type","onChange","e","setSearchTerm","keywords","target","value","placeholder","map","category","console","log","isSelected","onClick","tagIndex","indexOf","concat","_toConsumableArray","toggleTag","val","_val$attributes$thumb","_val$attributes$thumb2","_val$attributes$thumb3","_val$attributes$thumb4","_val$attributes$thumb5","_val$attributes$conte","_val$attributes$autho","_val$attributes$autho2","_val$attributes","_val$attributes$autho3","_val$attributes$autho4","_val$attributes$autho5","_val$attributes$autho6","_val$attributes$autho7","_val$attributes$autho8","_val$attributes$autho9","_val$attributes$autho10","_val$attributes$autho11","_val$attributes2","_val$attributes2$auth","_val$attributes2$auth2","_val$attributes2$auth3","_val$attributes2$auth4","_val$attributes2$auth5","_val$attributes2$auth6","_val$attributes2$auth7","Card","url","img","thumbnail","formats","medium","title","description","contents","content","author_name","author","author_thumbnail","published","publishedAt"],"sourceRoot":""}