Added component to group all social links

hemilabs · Oct 18, 2024 · 5eb36cc · 5eb36cc
1 parent 9074582
commit 5eb36cc
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 62 deletions.
diff --git a/site/components/layout/HomeFooter.js b/site/components/layout/HomeFooter.js
@@ -1,41 +1,13 @@
-import Link from 'next/link'
 import { useTranslations } from 'next-intl'
 
-import SvgContainer from '../svg/SvgContainer'
+import Socials from './Socials'
 
 const HomeFooter = function () {
   const t = useTranslations()
   return (
     <div className="border-slate-300/55 flex items-center justify-between mt-8 p-8 text-gray-500 border-t">
-      <div>
-        <p>{t('copyright')}</p>
-      </div>
-      <div className="flex gap-3">
-        <Link href="https://x.com/hemi_xyz" target="_blank">
-          <SvgContainer
-            className="text-grayscale-500 hover:text-grayscale-950 w-6"
-            name="twitter"
-          />
-        </Link>
-        <Link href="https://discord.gg/hemixyz" target="_blank">
-          <SvgContainer
-            className="text-grayscale-500 hover:text-grayscale-950 w-6"
-            name="discord"
-          />
-        </Link>
-        <Link href="https://github.com/hemilabs" target="_blank">
-          <SvgContainer
-            className="text-grayscale-500 hover:text-grayscale-950 w-6"
-            name="github"
-          />
-        </Link>
-        <Link href="https://www.linkedin.com/company/hemi-labs" target="_blank">
-          <SvgContainer
-            className="text-grayscale-500 hover:text-grayscale-950 w-6"
-            name="linkedin"
-          />
-        </Link>
-      </div>
+      <p>{t('copyright')}</p>
+      <Socials />
     </div>
   )
 }

diff --git a/site/components/layout/SocialIconLink.js b/site/components/layout/SocialIconLink.js
@@ -0,0 +1,12 @@
+import SvgContainer from '../svg/SvgContainer'
+
+const SocialIconLink = ({ href, iconName }) => (
+    <a href={href} rel="noopener noreferrer" target="_blank">
+      <SvgContainer
+        className="text-grayscale-500 hover:text-grayscale-950 w-6"
+        name={iconName}
+      />
+    </a>
+  )
+
+export default SocialIconLink
diff --git a/site/components/layout/Socials.js b/site/components/layout/Socials.js
@@ -0,0 +1,15 @@
+import SocialIconLink from './SocialIconLink'
+
+const Socials = () => (
+    <div className="flex gap-3">
+      <SocialIconLink href="https://x.com/hemi_xyz" iconName="twitter" />
+      <SocialIconLink href="https://discord.gg/hemixyz" iconName="discord" />
+      <SocialIconLink href="https://github.com/hemilabs" iconName="github" />
+      <SocialIconLink
+        href="https://www.linkedin.com/company/hemi-labs"
+        iconName="linkedin"
+      />
+    </div>
+  )
+
+export default Socials
diff --git a/site/components/layout/ToolsFooter.js b/site/components/layout/ToolsFooter.js
@@ -1,41 +1,13 @@
-import Link from 'next/link'
 import { useTranslations } from 'next-intl'
 
-import SvgContainer from '../svg/SvgContainer'
+import Socials from './Socials'
 
 const ToolsFooter = function () {
   const t = useTranslations()
   return (
     <div className="flex items-center justify-between m-6 text-gray-500">
-      <div>
-        <p>{t('copyright')}</p>
-      </div>
-      <div className="flex gap-3">
-        <Link href="https://x.com/hemi_xyz" target="_blank">
-          <SvgContainer
-            className="text-grayscale-500 hover:text-grayscale-950 w-6"
-            name="twitter"
-          />
-        </Link>
-        <Link href="https://discord.gg/hemixyz" target="_blank">
-          <SvgContainer
-            className="text-grayscale-500 hover:text-grayscale-950 w-6"
-            name="discord"
-          />
-        </Link>
-        <Link href="https://github.com/hemilabs" target="_blank">
-          <SvgContainer
-            className="text-grayscale-500 hover:text-grayscale-950 w-6"
-            name="github"
-          />
-        </Link>
-        <Link href="https://www.linkedin.com/company/hemi-labs" target="_blank">
-          <SvgContainer
-            className="text-grayscale-500 hover:text-grayscale-950 w-6"
-            name="linkedin"
-          />
-        </Link>
-      </div>
+      <p>{t('copyright')}</p>
+      <Socials />
     </div>
   )
 }