fix: archive CMC Study Group Meeting and update playlist link

src/components/MeetInfo-Table/index.js

@@ -2,7 +2,7 @@ import React from "react";
 import { useTable } from "react-table";
 import { TableWrapper } from "./MeetInfoTable.style";
 
-const Table = ({ columns, data }) => {
+const Table = ({ columns, data, showHeader = true }) => {
   const {
     getTableProps,
     getTableBodyProps,
@@ -16,12 +16,16 @@ const Table = ({ columns, data }) => {
 
   return (
     <TableWrapper>
-      <h1 className="meetings-table-title">
-        <a href="#meetings">Layer5 Meetings</a>
-      </h1>
-      <h3 className="meetings-table-subtitle">
-        Everyone is welcome to join. Engage!
-      </h3>
+      {showHeader && (
+  <>
+    <h1 className="meetings-table-title">
+      <a href="#meetings">Layer5 Meetings</a>
+    </h1>
+    <h3 className="meetings-table-subtitle">
+      Everyone is welcome to join. Engage!
+    </h3>
+  </>
+)}
       <table name="meetings" id="meetings" {...getTableProps()}>
         <thead>
           {headerGroups.map((headerGroup) => (

src/sections/Community/Calendar/calendar.style.js

@@ -99,6 +99,21 @@ const CalendarStyleWrapper = styled.div`
             border: calc(var(--fc-daygrid-event-dot-width, 8px) / 3) solid var(--fc-event-border-color, #ffffff)
         }
     }
+    .archived-meetings-section {
+        opacity: 0.6;
+        margin-top: 2rem;
+
+        h2 {
+            text-align: center;
+            margin-bottom: 0.5rem;
+        }
+
+        p {
+            text-align: center;
+            margin-bottom: 1rem;
+            font-style: italic;
+        }
+    }
 `;
 
 export default CalendarStyleWrapper;

src/sections/Community/Calendar/index.js

@@ -89,7 +89,8 @@ const Calendar = () => {
     []
   );
 
-  const data = React.useMemo(() => meet_links_data);
+  const data = React.useMemo(() => meet_links_data.filter(m => !m.archived));
+  const archivedData = React.useMemo(() => meet_links_data.filter(m => m.archived));
 
   return (
     <CalendarStyleWrapper>
@@ -132,6 +133,15 @@ const Calendar = () => {
           </div>
         </Container>
         <Table columns={columns} data={data} />
+
+        {archivedData.length > 0 && (
+          <div className="archived-meetings-section">
+            <h2>Archived Meetings</h2>
+            <p>These meeting series have concluded and are no longer active.</p>
+            <Table columns={columns} data={archivedData} showHeader = {false}/>
+          </div>
+        )}
+
       </div>
       <br />
       <Container>

src/sections/Community/Calendar/meetLinksData.js

@@ -33,6 +33,7 @@ export const meet_links_data = [
     slack_link: "https://layer5io.slack.com/archives/CDM0ACDM5",
     meeting_minutes: "https://docs.google.com/document/d/1O0l7eHX5dTkxdTXfebzvkoURnDexKFuw3lw2beUCSYM/edit",
     meeting_link: "https://meet.meshery.io/cmc",
-    meeting_recordings: "https://www.youtube.com/@mesheryio?sub_confirmation=1",
+    meeting_recordings: "https://www.youtube.com/playlist?list=PLutOg_DiPjIYXmTPLWiirlEN_k1VSDgeo",
+    archived: true, //series concluded on May 8th
   }
 ];