Make social links clickable (Joystream#4670)

* clickable link

* import order

* yarn lint

* vscode

packages/ui/src/memberships/components/MemberProfile/MemberDetails.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components'
 
 import { BlockTime } from '@/common/components/BlockTime'
 import { TransferSymbol } from '@/common/components/icons/symbols'
+import { Link } from '@/common/components/Link'
 import { Loading } from '@/common/components/Loading'
 import {
   SidePaneTable,
@@ -36,6 +37,15 @@ export const MemberDetails = React.memo(({ member }: Props) => {
     initiatingLeaving = '-',
   } = useMemberExtraInfo(member)
 
+  const externalResourceLink: any = {
+    TELEGRAM: 'https://web.telegram.org/k/#@',
+    TWITTER: 'https://twitter.com/',
+    FACEBOOK: 'https://facebook.com/',
+    YOUTUBE: 'https://youtube.com/user/',
+    LINKEDIN: 'https://www.linkedin.com/in/',
+    GITHUB: 'https://github.com/',
+  }
+
   if (isLoading || !memberDetails) {
     return (
       <EmptyBody>
@@ -132,7 +142,18 @@ export const MemberDetails = React.memo(({ member }: Props) => {
         memberDetails.externalResources.map((externalResource) => (
           <SidePaneRow key={`${externalResource.source}-externalResources`}>
             <SidePaneLabel text={socialTitle(externalResource.source)} />
-            <SidePaneText>{externalResource.value}</SidePaneText>
+            <SidePaneText>
+              {externalResourceLink[externalResource.source] ? (
+                <Link
+                  href={`${externalResourceLink[externalResource.source]}${externalResource.value}`}
+                  target="_blank"
+                >
+                  {externalResource.value}
+                </Link>
+              ) : (
+                externalResource.value
+              )}{' '}
+            </SidePaneText>
           </SidePaneRow>
         ))}
     </SidePaneTable>