add functionality to add additional links

implement additional functionality add link to sig-security meeting
eclipse-tractusx · Feb 21, 2024 · 03c6d6b · 03c6d6b
1 parent 67dfe0c
commit 03c6d6b
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 69 deletions.
diff --git a/community/open-meetings.mdx b/community/open-meetings.mdx
@@ -41,10 +41,15 @@ These are dedicated sync meetings for specific products, as well as open plannin
 
 <MeetingInfo title="Security - Office Hour"
              schedule="Every 2 weeks on Thursday effective 15. Feb 2024 until 31. Dec 2024 from 08:35 am to 09:30 am CET"
-             description="Open hour meeting, hosted by the [sig-security](https://github.com/eclipse-tractusx/sig-security?tab=readme-ov-file#readme) team. The goal of the meeting is to follow-up on security incidents, request review and assignments, and progress through security tools and procedures."
+             description="Open hour meeting, hosted by the sig-security team. The goal of the meeting is to follow-up on security incidents, request review and assignments, and progress through security tools and procedures."
              contact="[email protected]"
              sessionLink="https://teams.microsoft.com/l/meetup-join/19%3ameeting_MzYzMzVhODMtYWQyOC00NWVlLWEyMjMtNjVlZmY2NTlkNTdk%40thread.v2/0?context=%7b%22Tid%22%3a%221ad22c6d-2f08-4f05-a0ba-e17f6ce88380%22%2c%22Oid%22%3a%22a8b7a5ee-66ff-4695-afa2-08f893d8aaf6%22%7d"
              meetingLink="/meetings/security-office-hour.ics"
+             additionalLinks={
+                [
+                    {title: 'sig-security', url: 'https://github.com/eclipse-tractusx/sig-security?tab=readme-ov-file#readme'},
+                ]
+            }
 />
 
 <MeetingInfo title="[TRACE-X] Trace-X Open Meeting"

diff --git a/src/components/OpenMeetings/MeetingInfo.jsx b/src/components/OpenMeetings/MeetingInfo.jsx
@@ -16,88 +16,107 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
-import React from 'react';
+import React from "react";
 
-export default function MeetingInfo({title, schedule, description, contact, sessionLink = undefined, meetingLink = undefined}) {
-    return (
-        <section style={meetingInfo}>
-            <div style={meetingOverview}>
-                <h2 style={meetingTitle}>{title}</h2>
-                <div style={meetingSchedule}>{schedule}</div>
-            </div>
-            <div style={meetingDetails}>
-                <p>{description}</p>
-
-                <ul>
-                    <li style={itemTitle}>Contact:</li>
-                    <li style={itemLink}>
-                        <a href={"mailto:" + contact}>{contact}</a>
-                    </li>
-                </ul>
+export default function MeetingInfo({
+  title,
+  schedule,
+  description,
+  contact,
+  sessionLink = undefined,
+  meetingLink = undefined,
+  additionalLinks = [],
+}) {
+  return (
+    <section style={meetingInfo}>
+      <div style={meetingOverview}>
+        <h2 style={meetingTitle}>{title}</h2>
+        <div style={meetingSchedule}>{schedule}</div>
+      </div>
+      <div style={meetingDetails}>
+        <p>{description}</p>
 
-                <ul>
-                    <li style={itemTitle}>Participation opportunities:</li>
-                    { 
-                        sessionLink && 
-                            <li style={itemLink}>
-                                <a href={sessionLink}>Join Meeting</a>
-                            </li> 
-                    }
-                    { 
-                        meetingLink &&
-                            <li style={itemLink}>
-                                <a href={meetingLink}>Download calendar file</a>
-                            </li>
-                    }
-                </ul>
-            </div>
-        </section>
-    );
+        <ul>
+          <li style={itemTitle}>Contact:</li>
+          <li style={itemLink}>
+            <a href={"mailto:" + contact}>{contact}</a>
+          </li>
+        </ul>
+
+        <ul>
+          <li style={itemTitle}>Participation opportunities:</li>
+          {sessionLink && (
+            <li style={itemLink}>
+              <a href={sessionLink}>Join Meeting</a>
+            </li>
+          )}
+          {meetingLink && (
+            <li style={itemLink}>
+              <a href={meetingLink}>Download calendar file</a>
+            </li>
+          )}
+        </ul>
+        {additionalLinks.length > 0 && (
+          <ul>
+            <li style={itemTitle}>Additional links:</li>
+            {additionalLinks.map((link, index) => {
+                const { url, title } = link;
+                return (
+                  <li key={`${index}${url}`} style={itemLink}>
+                    <a href={url}>{title}</a>
+                  </li>
+                );
+              })}
+          </ul>
+        )}
+      </div>
+    </section>
+  );
 }
 
 const itemLink = {
-    fontWeight: '400',
-    fontSize: '14px',
-    lineHeight: '18px',
-    color: '#faa023',
-    listStyleImage: 'url("/img/product_link_bullet.png")'
-}
+  fontWeight: "400",
+  fontSize: "14px",
+  lineHeight: "18px",
+  color: "#faa023",
+  listStyleImage: 'url("/img/product_link_bullet.png")',
+};
 
 const itemTitle = {
-    fontWeight: '400',
-    fontSize: '14px',
-    lineHeight: '18px',
-    listStyle: 'none'
-  }
+  fontWeight: "400",
+  fontSize: "14px",
+  lineHeight: "18px",
+  listStyle: "none",
+};
 
 const meetingInfo = {
-    display: 'flex',
-    width: '100%',
-    padding: '1rem 0 0.5rem'
-}
+  display: "flex",
+  width: "100%",
+  padding: "1rem 0 0.5rem",
+};
 
 const meetingOverview = {
-    width: '33%',
-    margin: 'auto 0',
-    padding: '2rem 0 0.5rem',
-    borderRight: '2px solid #faa023'
-}
+  width: "33%",
+  margin: "auto 0",
+  padding: "2rem 0 0.5rem",
+  borderRight: "2px solid #faa023",
+};
 
 const meetingTitle = {
-    fontWeight: '700',
-    fontSize: '20px',
-    lineHeight: '25px'
-}
+  fontWeight: "700",
+  fontSize: "20px",
+  lineHeight: "25px",
+};
 
 const meetingSchedule = {
-    fontWeight: '400',
-    fontSize: '12px',
-    lineHeight: '16px',
-    color: '#a5a5a5'
-}
+  fontWeight: "400",
+  fontSize: "12px",
+  lineHeight: "16px",
+  color: "#a5a5a5",
+};
 
 const meetingDetails = {
-    width: '67%',
-    margin: 'auto 0',
-    padding: '0.5rem 1.5rem'
-}
+  width: "67%",
+  margin: "auto 0",
+  padding: "0.5rem 1.5rem",
+};