fix(islamic-website): remove facebook link from footer

haqq-network · Jan 24, 2024 · a8a4af3 · a8a4af3
1 parent 8e56bcc
commit a8a4af3
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 59 deletions.
diff --git a/apps/islamic-website/components/footer/footer.tsx b/apps/islamic-website/components/footer/footer.tsx
@@ -1,9 +1,17 @@
-import { useMemo } from 'react';
-import { Container } from '@haqq/islamic-website-ui-kit';
+import { ReactNode, useMemo } from 'react';
 import { useTranslations } from 'next-intl';
 import Image from 'next/image';
-import { SocialIconLink, SocialIconLinkProps } from './social-links';
 import { createSharedPathnamesNavigation } from 'next-intl/navigation';
+import {
+  Container,
+  DiscordIcon,
+  GithubIcon,
+  LinkedinIcon,
+  MediumIcon,
+  TelegramIcon,
+  TwitterIcon,
+  YoutubeIcon,
+} from '@haqq/islamic-website-ui-kit';
 
 const { Link } = createSharedPathnamesNavigation({
   locales: ['en', 'ar', 'id'],
@@ -15,6 +23,16 @@ interface FooterNavLink {
   title: string;
 }
 
+const SOCIAL_ICONS: Record<string, ReactNode> = {
+  youtube: <YoutubeIcon />,
+  discord: <DiscordIcon />,
+  github: <GithubIcon />,
+  linkedin: <LinkedinIcon />,
+  medium: <MediumIcon />,
+  telegram: <TelegramIcon />,
+  twitter: <TwitterIcon />,
+};
+
 type FooterNavLinks = Array<Array<FooterNavLink>>;
 
 function FooterNavLink({
@@ -124,7 +142,7 @@ const footerNavLinks: FooterNavLinks = [
 export function Footer({
   socialLinks,
 }: {
-  socialLinks: SocialIconLinkProps[];
+  socialLinks: { id: string; title: string; url: string }[];
 }) {
   const t = useTranslations('footer');
 
@@ -185,12 +203,16 @@ export function Footer({
               <div className="flex flex-wrap items-center gap-x-[14px] gap-y-[12px] text-white">
                 {socialLinks.map(({ id, url, title }) => {
                   return (
-                    <SocialIconLink
-                      id={id}
-                      key={title}
-                      url={url}
+                    <Link
                       title={title}
-                    />
+                      href={url}
+                      key={`${id}-${title}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="transition-colors duration-150 ease-in hover:text-[#18FFAC]"
+                    >
+                      {SOCIAL_ICONS[id]}
+                    </Link>
                   );
                 })}
               </div>

diff --git a/apps/islamic-website/components/footer/social-links.tsx b/apps/islamic-website/components/footer/social-links.tsx
diff --git a/apps/islamic-website/social-links.ts b/apps/islamic-website/social-links.ts
@@ -9,11 +9,6 @@ export const SOCIAL_LINKS = [
     url: 'https://discord.gg/islamiccoin',
     title: 'Discord',
   },
-  {
-    id: 'facebook',
-    url: 'https://www.facebook.com/groups/islamiccoin',
-    title: 'Facebook',
-  },
   {
     id: 'github',
     url: 'https://github.com/haqq-network',