Merge pull request #706 from eclipse-tractusx/feat/add-link-list-open…

…-meetings feat(open meetings): add functionality to add additional links to open meetings
eclipse-tractusx · Feb 21, 2024 · 7ecd66c · 7ecd66c
2 parents 8ca8ce2 + c1186a1
commit 7ecd66c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 21 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
@@ -18,7 +18,7 @@
  ********************************************************************************/
 import React from 'react';
 
-export default function MeetingInfo({title, schedule, description, contact, sessionLink = undefined, meetingLink = undefined}) {
+export default function MeetingInfo({title, schedule, description, contact, sessionLink = undefined, meetingLink = undefined, additionalLinks = []}) {
     return (
         <section style={meetingInfo}>
             <div style={meetingOverview}>
@@ -27,7 +27,7 @@ export default function MeetingInfo({title, schedule, description, contact, sess
             </div>
             <div style={meetingDetails}>
                 <p>{description}</p>
-                
+
                 <ul>
                     <li style={itemTitle}>Contact:</li>
                     <li style={itemLink}>
@@ -37,67 +37,78 @@ export default function MeetingInfo({title, schedule, description, contact, sess
 
                 <ul>
                     <li style={itemTitle}>Participation opportunities:</li>
-                    { 
-                        sessionLink && 
+                        {sessionLink && (
                             <li style={itemLink}>
                                 <a href={sessionLink}>Join Meeting</a>
-                            </li> 
-                    }
-                    { 
-                        meetingLink &&
+                            </li>
+                        )}
+                        {meetingLink && (
                             <li style={itemLink}>
                                 <a href={meetingLink}>Download calendar file</a>
                             </li>
-                    }
+                        )}
                 </ul>
-            </div>
-        </section>
-    );
+                {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")'
+    listStyleImage: 'url("/img/product_link_bullet.png")',
 }
 
 const itemTitle = {
     fontWeight: '400',
     fontSize: '14px',
     lineHeight: '18px',
-    listStyle: 'none'
-  }
+    listStyle: 'none',
+}
 
 const meetingInfo = {
     display: 'flex',
     width: '100%',
-    padding: '1rem 0 0.5rem'
+    padding: '1rem 0 0.5rem',
 }
 
 const meetingOverview = {
     width: '33%',
     margin: 'auto 0',
     padding: '2rem 0 0.5rem',
-    borderRight: '2px solid #faa023'
+    borderRight: '2px solid #faa023',
 }
 
 const meetingTitle = {
     fontWeight: '700',
     fontSize: '20px',
-    lineHeight: '25px'
+    lineHeight: '25px',
 }
 
 const meetingSchedule = {
     fontWeight: '400',
     fontSize: '12px',
     lineHeight: '16px',
-    color: '#a5a5a5'
+    color: '#a5a5a5',
 }
 
 const meetingDetails = {
     width: '67%',
     margin: 'auto 0',
-    padding: '0.5rem 1.5rem'
+    padding: '0.5rem 1.5rem',
 }