enhance-component-to-dynamically-query-data-from-collections

Signed-off-by: vishalvivekm <[email protected]>

Author: vishalvivekm

src/collections/use-cases/commenting/index.mdx

@@ -0,0 +1,8 @@
+---
+title: Brainstorm with commenting
+abstract: "MeshMap's Designer Mode offers a powerful collaboration feature through comments."
+thumbnail: ../../../assets/images/comments/comment.svg
+eurl: https://layer5.io/cloud-native-management/meshmap/collaborate/peer-reviews
+category: usecase
+status: delivered
+---

src/collections/use-cases/whiteboarding/index.mdx

@@ -0,0 +1,8 @@
+---
+title: Whiteboarding
+abstract: "The Whiteboardingg and Freestyle Drawing feature introduces versatile drawing capabilities within MeshMap"
+thumbnail: ../../../assets/images/whiteboard/whiteboard.svg
+eurl: https://layer5.io/architecture-diagram/design-architecture-diagramm
+category: usecase
+status: delivered
+---

src/components/RelatedPicks/index.js

@@ -1,5 +1,7 @@
 import React from "react";
+import { graphql, useStaticQuery } from "gatsby";
 import { Container, Wrapper, CardWrapper, CardImageContainer, Image, CardTitle } from "./style";
+import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode";
 
 import { Link } from "gatsby";
 
@@ -18,17 +20,51 @@ const Card = ({ title, imgSrc, redirectLink }) => {
   );
 };
 
-const RelatedPicks = ({ content }) => {
+const RelatedPicks = ({ heading }) => {
+  const { isDark } = useStyledDarkMode();
+
+  const data = useStaticQuery(
+    graphql `query allUseCases {
+      allMdx(
+        filter: {fields: {collection: {eq: "use-cases"}}, frontmatter: {category: {eq: "supportedplatform"}}}
+      ) {
+        nodes {
+          id
+          frontmatter {
+            title
+            redirectLink
+            darkimgsrc {
+              childImageSharp {
+                gatsbyImageData(layout: FULL_WIDTH)
+              }
+              extension
+              publicURL
+            }
+            lightimgsrc {
+              childImageSharp {
+                gatsbyImageData(layout: FULL_WIDTH)
+              }
+              extension
+              publicURL
+            }
+            category
+          }
+        }
+      }
+    }`
+  );
 
   return (
     <>
       <Container>
         <h2>Other Supported Platforms</h2>
         <Wrapper>
           {
-            content.map(item => (
-              <Card key={item.id} title={item.title} imgSrc={item.imgSrc} redirectLink={item.redirectLink}/>
-            ))
+            data.allMdx.nodes
+              .filter(item => item.frontmatter.title.split(" ")[0].toLowerCase() !== heading)
+              .map(item => (
+                <Card key={item.id} title={item.frontmatter.title} imgSrc={ isDark ? item.frontmatter.darkimgsrc.publicURL : item.frontmatter.lightimgsrc.publicURL } redirectLink={item.frontmatter.redirectLink}/>
+              ))
           }
         </Wrapper>
       </Container>