From 6de59a12451c282bddcec5cf099514ef9f6f1a00 Mon Sep 17 00:00:00 2001
From: Olaleye Blessing <Olayinkablexxy@gmail.com>
Date: Fri, 14 Apr 2023 11:18:11 +0100
Subject: [PATCH] feat: open TSC members social links in a new tab (#1506)

Co-authored-by: Akshat Nema <76521428+akshatnema@users.noreply.github.com>
---
 pages/community/tsc.js | 56 +++++++++++++++++++-----------------------
 1 file changed, 25 insertions(+), 31 deletions(-)

diff --git a/pages/community/tsc.js b/pages/community/tsc.js
index 96d22912aab2..57238ec48e19 100644
--- a/pages/community/tsc.js
+++ b/pages/community/tsc.js
@@ -139,6 +139,28 @@ export default function TSC() {
   );
 }
 
+const socials = {
+  "Github": <GithubSVG />,
+  "Twitter": <TwitterSVG />,
+  "Linkedin": <LinkedInSVG />,
+}
+
+function SocialLink({ href, social }) {
+  return (
+    <li>
+      <a
+        href={href}
+        className="text-gray-600 hover:text-gray-500"
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        <span className="sr-only">{social}</span>
+        {socials[social]}
+      </a>
+    </li>
+  )
+}
+
 function UserInfo({ user }) {
   return (
     <li
@@ -154,37 +176,9 @@ function UserInfo({ user }) {
           <div className="font-bold text-lg my-3">{user.name}</div>
           <UserWorkStatus user={user} />
           <ul role="list" className="flex justify-center space-x-5 my-5">
-            <li>
-              <a
-                href={user.github}
-                className="text-gray-600 hover:text-gray-500"
-              >
-                <span className="sr-only">GitHub</span>
-                <GithubSVG />
-              </a>
-            </li>
-            {user.twitter ? (
-              <li>
-                <a
-                  href={user.twitter}
-                  className="text-gray-600 hover:text-gray-500"
-                >
-                  <span className="sr-only">Twitter</span>
-                  <TwitterSVG />
-                </a>
-              </li>
-            ) : null}
-            {user.linkedin ? (
-              <li>
-                <a
-                  href={user.linkedin}
-                  className="text-gray-600 hover:text-gray-500"
-                >
-                  <span className="sr-only">LinkedIn</span>
-                  <LinkedInSVG />
-                </a>
-              </li>
-            ) : null}
+            <SocialLink href={user.github} social="Github" />
+            {user.twitter ? <SocialLink href={user.twitter} social="Twitter" /> : null}
+            {user.linkedin ? <SocialLink href={user.linkedin} social="Linkedin" /> : null}
           </ul>
         </div>
       </div>