Add inactive MeshMates section and update filtering logic

Signed-off-by: Rian Cteulp <[email protected]>

Author: ritzorama

src/sections/Community/Meshmates/index.js

@@ -48,9 +48,13 @@ const Meshmates = () => {
 }`
   );
 
-  // Separate active and emeritus MeshMates
+  // Separate MeshMates by status and emeritus flag
   const activeMeshMates = data.allMdx.nodes.filter(
-    ({ frontmatter }) => frontmatter.emeritus !== "yes"
+    ({ frontmatter }) => frontmatter.emeritus !== "yes" && frontmatter.status !== "Inactive"
+  );
+
+  const inactiveMeshMates = data.allMdx.nodes.filter(
+    ({ frontmatter }) => frontmatter.emeritus !== "yes" && frontmatter.status === "Inactive"
   );
 
   const emeritusMeshMates = data.allMdx.nodes.filter(
@@ -76,8 +80,8 @@ const Meshmates = () => {
           </Col>
         </Row>
         <div className="meshmates-grid">
-          <h1> Our MeshMates </h1>
-          <p> MeshMate is a distinction that Layer5 awards select members of the community that who innately align with the Layer5 culture of helping others, paying it forward, and have a commitment to sharing their knowledge of Layer5 projects with the community. MeshMates are Layer5 ambassadors (not employees) and their commitment to helping others and sharing their expertise has a huge impact on the Layer5 community – don’t hesitate to reach out to them! </p>
+          <h1> Active MeshMates </h1>
+          <p> MeshMate is a distinction that Layer5 awards select members of the community that who innately align with the Layer5 culture of helping others, paying it forward, and have a commitment to sharing their knowledge of Layer5 projects with the community. MeshMates are Layer5 ambassadors (not employees) and their commitment to helping others and sharing their expertise has a huge impact on the Layer5 community – don't hesitate to reach out to them! </p>
           <Row style={{
             flexWrap: "wrap"
           }}>
@@ -89,6 +93,22 @@ const Meshmates = () => {
           </Row>
         </div>
 
+        {inactiveMeshMates.length > 0 && (
+          <div className="meshmates-grid inactive-section">
+            <h1> Inactive MeshMates </h1>
+            <p> These MeshMates are currently on hiatus from active participation in the program but remain valued members of our community. </p>
+            <Row style={{
+              flexWrap: "wrap"
+            }}>
+              {inactiveMeshMates.map(({ id, frontmatter, fields }) => (
+                <Col $xs={12} $sm={6} $lg={4} key={id}>
+                  <ProfileCard frontmatter={frontmatter} cardlink={fields.slug} />
+                </Col>
+              ))}
+            </Row>
+          </div>
+        )}
+
         {emeritusMeshMates.length > 0 && (
           <div className="meshmates-grid emeritus-section">
             <h1> Emeritus MeshMates </h1>

src/sections/Community/Meshmates/meshmates.style.js

@@ -106,6 +106,20 @@ const MeshMatesWrapper = styled.div`
         }
     }
 
+    .inactive-section {
+        margin-top: 3rem;
+        padding-top: 1.5rem;
+        border-top: 1px solid ${props => props.theme.grey212121Toblack}; 
+        
+        h1 {
+            color: ${props => props.theme.secondaryColor};
+        }
+        
+        p {
+            margin-bottom: 2rem;
+        }
+    }
+
     .emeritus-section {
         margin-top: 3rem;
         padding-top: 1.5rem;