added social media buttons conditionals

dump-hr · Nov 18, 2024 · 87bd0f1 · 87bd0f1
1 parent 68af634
commit 87bd0f1
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 7 deletions.
diff --git a/apps/web/src/components/SpeakersSection/SpeakerModal/SpeakerModal.module.scss b/apps/web/src/components/SpeakersSection/SpeakerModal/SpeakerModal.module.scss
@@ -33,6 +33,37 @@
     }
 
     .contentWrapper {
+      width: 100%;
+      max-width: 536px;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      text-align: start;
+      box-sizing: border-box;
+      padding-left: 80px;
+
+      .fullName {
+        color: #eaeaea;
+        font-family: 'PP Neue Machina';
+        font-size: 48px;
+        line-height: 48px;
+        letter-spacing: -2px;
+      }
+
+      .titleAndCompany {
+        color: #ff482f;
+        font-family: 'PP Neue Machina';
+        font-size: 24px;
+        line-height: 32px;
+        letter-spacing: -1px;
+        text-transform: uppercase;
+      }
+
+      .socialMediaButtons {
+        display: flex;
+        gap: 24px;
+      }
+
       .button {
         width: fit-content;
         color: #fff;

diff --git a/apps/web/src/components/SpeakersSection/SpeakerModal/SpeakerModal.tsx b/apps/web/src/components/SpeakersSection/SpeakerModal/SpeakerModal.tsx
@@ -48,22 +48,42 @@ const SpeakerModal = ({ close, isOpen, speaker }: SpeakerModalProps) => {
 
   if (!isOpen) return null;
 
+  const openLink = (href: string | undefined) => {
+    if (!href) return;
+    window.open(href, '_blank');
+  };
+
   return (
     <div className={c.backdrop}>
       <div className={c.speakerModal} onClick={stopPropagation}>
         <img className={c.image} src={speaker.photo} alt='' />
         <div className={c.contentWrapper}>
-          <h2>
+          <h2 className={c.fullName}>
             {speaker.firstName} {speaker.lastName}
           </h2>
-          <h3>
+          <h3 className={c.titleAndCompany}>
             {speaker.title} @ {speaker.company?.name}
           </h3>
-          <button className={clsx(c.button, c.grainyButton)}>
-            {`[ `}
-            REGISTRIRAJ SVOJ DOLAZAK
-            {` ]`}
-          </button>
+          <div className={c.socialMediaButtons}>
+            {speaker.linkedin && (
+              <button
+                className={clsx(c.button, c.grainyButton)}
+                onClick={() => openLink(speaker.linkedin)}>
+                {`[ `}
+                LinkedIn
+                {` ]`}
+              </button>
+            )}
+            {speaker.instagram && (
+              <button
+                className={clsx(c.button, c.grainyButton)}
+                onClick={() => openLink(speaker.instagram)}>
+                {`[ `}
+                Instagram
+                {` ]`}
+              </button>
+            )}
+          </div>
         </div>
         <button className={c.closeButton} onClick={() => close()}>
           Zatvori