add contact info to member cards, implement broken mailto link workaround

ezgg_website/components/member_card.py

@@ -1,14 +1,18 @@
 from pathlib import Path
 from dataclasses import dataclass
+from typing import Optional
 
 import rio
 
+
 @dataclass
 class MemberInfo:
     picture_path: Path
     name: str
     position: str
     entry_date: str
+    contact_mail: Optional[str]
+    contact_steam: Optional[str]
 
 
 class MemberCard(rio.Component):
@@ -21,13 +25,26 @@ class MemberCard(rio.Component):
         self.margin_right = 1
 
     def build(self) -> rio.Component:
-        return rio.Rectangle(
-            content=rio.Column(
+        contact_row = rio.Row()
+        content = rio.Column(
                 rio.Image(self._info.picture_path, height=9, margin_bottom=1.3),
                 rio.Text(self._info.name, margin_bottom=0.4, style=rio.TextStyle(font_weight="bold")),
                 rio.Text(self._info.position, margin_bottom=0.4,  style=rio.TextStyle(italic=True)),
-                rio.Text(f"Mitglied seit {self._info.entry_date}",  style=rio.TextStyle(italic=True), margin_bottom=0.4)
-            ),
+                rio.Text(f"Mitglied seit {self._info.entry_date}",  style=rio.TextStyle(italic=True), margin_bottom=0.4),
+                contact_row
+            )
+
+        # @Todo: Icon alignment broken if only one icon should be shown.
+        if self._info.contact_mail:
+            contact_row.add(rio.Link(rio.Icon("material/mail"), f"mailto://{self._info.contact_mail}", open_in_new_tab=True, margin_top=1, margin_bottom=1, align_x=0.9))
+        if self._info.contact_steam:
+            contact_row.add(rio.Link(rio.Icon("custom/steam"), self._info.contact_steam, open_in_new_tab=True, margin_top=1, margin_bottom=1, align_x=0.1))
+
+        if not self._info.contact_steam and not self._info.contact_mail:
+            contact_row.add(rio.Text("", margin_top=2))
+
+        return rio.Rectangle(
+            content=content,
             fill=self.session.theme.neutral_color,
             corner_radius=self.session.theme.corner_radius_medium,
             shadow_radius=0.5,