Support more external / social link types

oasisprotocol · Feb 13, 2024 · e2dec6b · e2dec6b
1 parent a8acaa3
commit e2dec6b
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 10 deletions.
diff --git a/.env b/.env
@@ -14,3 +14,6 @@ REACT_APP_TESTNET_API=https://testnet.nexus.oasis.io/v1/
 # REACT_APP_SOCIAL_DISCORD=https://oasis.io/discord
 # REACT_APP_SOCIAL_YOUTUBE=https://www.youtube.com/channel/UC35UFPcZ2F1wjPxhPrSsESQ
 # REACT_APP_SOCIAL_REDDIT=https://www.reddit.com/r/oasisnetwork/
+# REACT_APP_SOCIAL_LINKEDIN=https://www.linkedin.com/company/oasisprotocol
+# REACT_APP_SOCIAL_DOCS=https://oasisprotocol.org/developers#overview
+# REACT_APP_SOCIAL_HOME=https://oasisprotocol.org/
diff --git a/src/app/components/Social/index.tsx b/src/app/components/Social/index.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import React, { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Grid from '@mui/material/Unstable_Grid2'
@@ -11,17 +11,23 @@ import twitter from './images/twitter.svg'
 import discord from './images/discord.svg'
 import youtube from './images/youtube.svg'
 import reddit from './images/reddit.svg'
+import LinkedInIcon from '@mui/icons-material/LinkedIn'
+import DocsIcon from '@mui/icons-material/MenuBook'
+import HomeIcon from '@mui/icons-material/Cottage'
 import { COLORS } from '../../../styles/theme/colors'
 import { socialMedia } from '../../utils/externalLinks'
+import { OverridableComponent } from '@mui/material/OverridableComponent'
+import { SvgIconTypeMap } from '@mui/material/SvgIcon'
 
 type SocialLinkProps = {
   label: string
   href: string
   isMobile: boolean
-  img: string
+  imgSrc?: string
+  img?: OverridableComponent<SvgIconTypeMap> & { muiName: string }
 }
 
-const SocialLink: FC<SocialLinkProps> = ({ label, href, isMobile, img }) => {
+const SocialLink: FC<SocialLinkProps> = ({ label, href, isMobile, imgSrc, img }) => {
   return (
     <Link
       href={href}
@@ -38,7 +44,10 @@ const SocialLink: FC<SocialLinkProps> = ({ label, href, isMobile, img }) => {
       target="_blank"
     >
       <Box sx={{ display: 'flex', justifyContent: 'center', mb: 3 }}>
-        <img src={img} alt={label} height={40} />
+        <>
+          {imgSrc && <img src={imgSrc} alt={label} height={40} />}
+          {img && React.createElement(img, { sx: { fontSize: 50, margin: '-4px' } })}
+        </>
       </Box>
       <Typography sx={{ fontSize: 18, fontWeight: 700, mb: isMobile ? 4 : 0 }}>{label}</Typography>
     </Link>
@@ -89,41 +98,55 @@ export const Social: FC = () => {
               isMobile={isMobile}
               label={t('social.telegram')}
               href={socialMedia.telegram}
-              img={telegram}
+              imgSrc={telegram}
             />
           )}
           {socialMedia.twitter && (
             <SocialLink
               isMobile={isMobile}
               label={t('social.twitter')}
               href={socialMedia.twitter}
-              img={twitter}
+              imgSrc={twitter}
             />
           )}
           {socialMedia.discord && (
             <SocialLink
               isMobile={isMobile}
               label={t('social.discord')}
               href={socialMedia.discord}
-              img={discord}
+              imgSrc={discord}
             />
           )}
           {socialMedia.youtube && (
             <SocialLink
               isMobile={isMobile}
               label={t('social.youtube')}
               href={socialMedia.youtube}
-              img={youtube}
+              imgSrc={youtube}
             />
           )}
           {socialMedia.reddit && (
             <SocialLink
               isMobile={isMobile}
               label={t('social.reddit')}
               href={socialMedia.reddit}
-              img={reddit}
+              imgSrc={reddit}
             />
           )}
+          {socialMedia.linkedin && (
+            <SocialLink
+              isMobile={isMobile}
+              label={t('social.linkedin')}
+              href={socialMedia.linkedin}
+              img={LinkedInIcon}
+            />
+          )}
+          {socialMedia.docs && (
+            <SocialLink isMobile={isMobile} label={t('social.docs')} href={socialMedia.docs} img={DocsIcon} />
+          )}
+          {socialMedia.home && (
+            <SocialLink isMobile={isMobile} label={t('social.home')} href={socialMedia.home} img={HomeIcon} />
+          )}
         </Box>
       </Grid>
     </Grid>

diff --git a/src/app/utils/externalLinks.ts b/src/app/utils/externalLinks.ts
@@ -5,6 +5,9 @@ const customTwitter = process.env.REACT_APP_SOCIAL_TWITTER
 const customDiscord = process.env.REACT_APP_SOCIAL_DISCORD
 const customYouTube = process.env.REACT_APP_SOCIAL_YOUTUBE
 const customReddit = process.env.REACT_APP_SOCIAL_REDDIT
+const customLinkedin = process.env.REACT_APP_SOCIAL_LINKEDIN
+const customDocs = process.env.REACT_APP_SOCIAL_DOCS
+const customHome = process.env.REACT_APP_SOCIAL_HOME
 
 const hasCustomSocialLinks =
   !!customTelegram || !!customTwitter || !!customDiscord || !!customYouTube || !!customReddit
@@ -16,6 +19,9 @@ export const socialMedia = hasCustomSocialLinks
       discord: customDiscord,
       youtube: customYouTube,
       reddit: customReddit,
+      linkedin: customLinkedin,
+      docs: customDocs,
+      home: customHome,
     }
   : {
       telegram: 'https://t.me/oasisprotocolcommunity',

diff --git a/src/global.d.ts b/src/global.d.ts
@@ -15,6 +15,9 @@ declare global {
       REACT_APP_SOCIAL_DISCORD?: string
       REACT_APP_SOCIAL_YOUTUBE?: string
       REACT_APP_SOCIAL_REDDIT?: string
+      READ_APP_SOCIAL_LINKEDIN?: string
+      READ_APP_SOCIAL_DOCS?: string
+      READ_APP_SOCIAL_HOME?: string
     }
   }
 }
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -286,7 +286,10 @@
     "reddit": "Reddit",
     "telegram": "Telegram",
     "twitter": "X",
-    "youtube": "Youtube"
+    "youtube": "Youtube",
+    "linkedin": "LinkedIn",
+    "docs": "Documentation",
+    "home": "Home"
   },
   "tableLayoutButton": {
     "changeView": "Change view"