added ability to hide filters

src/components/blog/BlogCards/index.js

@@ -12,10 +12,15 @@ export default function BlogCards({
     const data = await getBlogPosts(filterCallback.join(','));
     console.log(data.topics)
     const resultset = []
-    for (const topic of data.topics) {
+    if (data.topics) {
+      for (const topic of data.topics) {
         resultset.push(await getPostList(topic))
+      }
+      setCardData(resultset);
+    } else {
+      setCardData(undefined);
     }
-    setCardData(resultset);
+    
   };
 
   React.useEffect(() => {
@@ -45,7 +50,7 @@ export default function BlogCards({
       </div>
     );
   } else {
-    return <div></div>;
+    return <div className={styles.noFound}> No Blog Post Found with the Given Search Criteria</div>;
   }
 }
 

src/components/blog/BlogCards/styles.module.css

@@ -17,3 +17,11 @@
 .space {
   height: 200px;
 }
+
+.noFound {
+  font-size: 28px;
+  font-weight: 500;
+  color: var(--dev-secondary-text);
+  padding: 8px;
+  margin: 50px;
+}

src/components/blog/BlogSidebar/BlogSidebarButton/styles.module.css

@@ -4,7 +4,9 @@
   font-weight: 500;
   color: var(--dev-secondary-text);
   padding: 8px;
-  margin: 5px;
+  margin-right: 5px;
+  margin-top: 5px;
+  margin-bottom: 5px;
   border-style: solid;
   border-width: 1px;
   border-color: var(--dev-text-color-normal);
@@ -17,7 +19,9 @@
   background-color: var(--dev-secondary-text);
   color: var(--dev-card-background);
   padding: 8px;
-  margin: 5px;
+  margin-right: 5px;
+  margin-bottom: 5px;
+  margin-top: 5px;
   border-style: solid;
   border-width: 1px;
   border-color: var(--dev-text-color-normal);

src/components/blog/BlogSidebar/index.js

@@ -11,7 +11,7 @@ export default function BlogSidebar({
   }) {
   const [tagProductData, setTagProductData] = React.useState();
   const [tagTechnologyData, setTagTechnologyData] = React.useState();
-  const [filteredProduct, setFilteredProduct] = React.useState();
+  const [filterTags, setFilterTags] = React.useState(true);
 
   const getTagData = async () => {
     const data = await getTags();
@@ -34,15 +34,16 @@ export default function BlogSidebar({
     setTagTechnologyData(tagTechnologyResultset)
   };
 
+  function toggleSeeAll() {
+    filterTags ? setFilterTags(false) : setFilterTags(true)
+  }
+  
+
   React.useEffect(() => {
     getTagData();
   }, []);
 
-  function setFilters(e, f) {
-    e.currentTarget.classList.toggle('selected');
-    console.log(e)
-    filterCallback(f)
-  }
+  const filterText = filterTags ? 'See All Tags' : 'See Less Tags'
 
   if (tagProductData && tagTechnologyData) {
     return (
@@ -51,10 +52,20 @@ export default function BlogSidebar({
         <div className={styles.tagContainer}>
             {tagProductData.map(function(a, index){
               return <BlogSidebarButton key={a} text={a} filterCallback={filterCallback}></BlogSidebarButton>
-              // return <div key={a} onClick={(e) => setFilters(e, a)} className={styles.tag}>{a}</div>
             })}
         </div>
+        <div className={styles.tagHeader}>Posts by Identity Governance</div>
+        <div className={styles.tagContainer}>
+            {tagTechnologyData.map(function(a, index){
+              return <div className={index > 10 && filterTags ? styles.hidden : ''} > <BlogSidebarButton key={a} text={a} filterCallback={filterCallback}></BlogSidebarButton></div>
+            })}
+        </div>
+        <div className={styles.seeAll} onClick={(e) => toggleSeeAll()}>
+          {filterText}
+          {/* <img className={styles.caretDown} src={useBaseUrl('/blog/caret-down-thin.svg')}></img> */}
+        </div>
       </div>
+      
     );
   } else {
     return <div></div>;

src/components/blog/BlogSidebar/styles.module.css

@@ -1,34 +1,52 @@
 
 .sidebar {
-  width: 300px;
+  width: 400px;
   height: 100%;
-  margin: 50px;
+  margin-left: 50px;
 }
 
 .tagHeader {
+  margin-top: 10px;
   font-size: 22px;
   font-weight: 700;
 }
 
 .tagContainer {
   display: flex;
+  flex-wrap: wrap;
 }
 
-.tag {
-  font-size: 16px;
-  font-weight: 500;
+
+.hidden {
+  display: none;
+}
+
+.seeAll {
+  margin-top: 5px;
+  margin-bottom: 10px;
   color: var(--dev-secondary-text);
-  padding: 8px;
-  margin: 5px;
   border-style: solid;
   border-width: 1px;
-  border-color: var(--dev-text-color-normal);
+  width: 100%;
   transition: background-color 500ms;
+  text-align: center;
+  
 }
 
-.tag:hover {
+.seeAll:hover {
   cursor: pointer;
   background-color: var(--dev-text-color-normal);
   color: var(--dev-card-background);
 }
 
+.caretDown {
+  margin-left: 5px;
+  height: 26px;
+  width: 26px;
+  top: 6px;
+  position: relative;
+}
+
+.caretDown:hover {
+
+}

static/blog/caret-down-thin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M144.6 361.4c4 4.2 9.6 6.6 15.4 6.6s11.4-2.4 15.4-6.6L300.5 229.3c2.2-2.3 3.5-5.4 3.5-8.7c0-7-5.6-12.6-12.6-12.6H28.6c-7 0-12.6 5.6-12.6 12.6c0 3.2 1.2 6.3 3.5 8.7L144.6 361.4zm-11.6 11L7.8 240.3C2.8 235 0 227.9 0 220.6C0 204.8 12.8 192 28.6 192H291.4c15.8 0 28.6 12.8 28.6 28.6c0 7.3-2.8 14.4-7.8 19.7L187 372.4c-7 7.4-16.8 11.6-27 11.6s-20-4.2-27-11.6z"/></svg>