fix: update social icons in footer to link

deriv-com · Dec 1, 2023 · 06ed9e0 · 06ed9e0
1 parent d39bd7d
commit 06ed9e0
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/libs/blocks/src/lib/footer/footer.social.tsx b/libs/blocks/src/lib/footer/footer.social.tsx
@@ -1,5 +1,5 @@
+import { CustomLink } from '@deriv-com/components';
 import { SocialIcons } from './footer-block';
-import React from 'react';
 
 export const SocialMediaSection = ({
   socialButtons,
@@ -9,7 +9,9 @@ export const SocialMediaSection = ({
   return (
     <div className="flex gap-gap-lg max-lg:justify-center">
       {socialButtons.map((item) => (
-        <React.Fragment key={item.href}>{item.icon}</React.Fragment>
+        <CustomLink href={item.href} target="_blank" key={item.href}>
+          {item.icon}
+        </CustomLink>
       ))}
     </div>
   );

diff --git a/libs/components/src/lib/link/index.tsx b/libs/components/src/lib/link/index.tsx
@@ -13,6 +13,7 @@ export interface CustomLinkProps extends HTMLAttributes<HTMLAnchorElement> {
   hasLinkColor?: boolean;
   disabled?: boolean;
   iconColor?: iconColorVariant;
+  target?: '_blank' | '_self' | '_parent' | '_top';
 }
 export type iconColorVariant = 'black' | 'subtle' | 'disabled' | 'default';
 export type textSize = 'sm' | 'md' | 'lg';
@@ -34,6 +35,7 @@ export function CustomLink({
   hasHoverDecoration = true,
   hasLinkColor = false,
   disabled = false,
+  target = '_self',
   children,
   ...rest
 }: CustomLinkProps) {
@@ -42,6 +44,7 @@ export function CustomLink({
   return (
     <DerivLink
       href={href}
+      target={target}
       className={qtMerge(
         'flex',
         'text-typography-default',

diff --git a/libs/features/src/lib/footer/row/data.tsx b/libs/features/src/lib/footer/row/data.tsx
@@ -146,26 +146,26 @@ export const warnText =
 export const socialButtons = [
   {
     icon: <StandaloneFacebookIcon iconSize="md" />,
-    href: '/fb',
+    href: 'https://www.facebook.com/derivdotcom',
   },
   {
     icon: <StandaloneInstagramIcon iconSize="md" />,
-    href: '/insta',
+    href: 'https://www.instagram.com/deriv_official',
   },
   {
     icon: <StandaloneXTwitterIcon iconSize="md" />,
-    href: '/twitter',
+    href: 'https://twitter.com/derivdotcom/',
   },
   {
     icon: <StandaloneYoutubeIcon iconSize="md" />,
-    href: '/youtube',
+    href: 'https://www.youtube.com/@deriv',
   },
   {
     icon: <StandaloneLinkedinIcon iconSize="md" />,
-    href: '/linkedin',
+    href: 'https://www.linkedin.com/company/derivdotcom/',
   },
   {
     icon: <StandaloneTelegramIcon iconSize="md" />,
-    href: '/telegram',
+    href: 'https://t.me/derivdotcomofficial',
   },
 ];