WIP: Continue to refactor Social links and add more fun colors to them

components/Footer.tsx

@@ -1,16 +1,10 @@
-import { FaEnvelopeOpenText } from '@react-icons/all-files/fa/FaEnvelopeOpenText'
-import { FaGithub } from '@react-icons/all-files/fa/FaGithub'
-import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin'
-import { FaMastodon } from '@react-icons/all-files/fa/FaMastodon'
-import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter'
-import { FaYoutube } from '@react-icons/all-files/fa/FaYoutube'
-import { FaZhihu } from '@react-icons/all-files/fa/FaZhihu'
-import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
-import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
 import * as React from 'react'
+import cs from 'classnames'
+import { IoMoonSharp, IoSunnyOutline } from 'react-icons/io5'
 
 import * as config from '@/lib/config'
 import { useDarkMode } from '@/lib/use-dark-mode'
+import { PageSocialButtons } from './PageSocial'
 
 import styles from './styles.module.css'
 
@@ -54,88 +48,7 @@ export function FooterImpl() {
       </div>
 
       <div className={styles.social}>
-        {config.twitter && (
-          <a
-            className={styles.twitter}
-            href={`https://twitter.com/${config.twitter}`}
-            title={`Twitter @${config.twitter}`}
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            <FaTwitter />
-          </a>
-        )}
-
-        {config.mastodon && (
-          <a
-            className={styles.mastodon}
-            href={config.mastodon}
-            title={`Mastodon ${config.getMastodonHandle()}`}
-            rel='me'
-          >
-            <FaMastodon />
-          </a>
-        )}
-
-        {config.zhihu && (
-          <a
-            className={styles.zhihu}
-            href={`https://zhihu.com/people/${config.zhihu}`}
-            title={`Zhihu @${config.zhihu}`}
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            <FaZhihu />
-          </a>
-        )}
-
-        {config.github && (
-          <a
-            className={styles.github}
-            href={`https://github.com/${config.github}`}
-            title={`GitHub @${config.github}`}
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            <FaGithub />
-          </a>
-        )}
-
-        {config.linkedin && (
-          <a
-            className={styles.linkedin}
-            href={`https://www.linkedin.com/in/${config.linkedin}`}
-            title={`LinkedIn ${config.author}`}
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            <FaLinkedin />
-          </a>
-        )}
-
-        {config.newsletter && (
-          <a
-            className={styles.newsletter}
-            href={`${config.newsletter}`}
-            title={`Newsletter ${config.author}`}
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            <FaEnvelopeOpenText />
-          </a>
-        )}
-
-        {config.youtube && (
-          <a
-            className={styles.youtube}
-            href={`https://www.youtube.com/${config.youtube}`}
-            title={`YouTube ${config.author}`}
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            <FaYoutube />
-          </a>
-        )}
+        <PageSocialButtons />
       </div>
     </footer>
   )

components/NotionPageHeader.tsx

@@ -1,8 +1,7 @@
 import type * as types from 'notion-types'
-import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
-import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
 import cs from 'classnames'
 import * as React from 'react'
+import { IoMoonSharp, IoSunnyOutline } from 'react-icons/io5'
 import { Breadcrumbs, Header, Search, useNotionContext } from 'react-notion-x'
 
 import { isSearchEnabled, navigationLinks, navigationStyle } from '@/lib/config'

components/PageActions.tsx

@@ -1,5 +1,5 @@
-import { AiOutlineRetweet } from '@react-icons/all-files/ai/AiOutlineRetweet'
-import { IoHeartOutline } from '@react-icons/all-files/io5/IoHeartOutline'
+import { AiOutlineRetweet } from 'react-icons/ai'
+import { IoHeartOutline } from 'react-icons/io5'
 
 import styles from './styles.module.css'
 

components/PageSocial.module.css

@@ -6,11 +6,10 @@
   color: var(--fg-color);
 }
 
-.action {
+.pageSocial a {
   position: relative;
   border-radius: 50%;
   border: 2px solid var(--fg-color-6);
-  transition: all 300ms ease-out;
   width: 3.5em;
   height: 3.5em;
   margin: 0 0 1em;
@@ -23,119 +22,32 @@
   cursor: pointer;
 }
 
-.action:last-child {
-  margin-bottom: 0;
+.pageSocial a:hover {
+  border: 2px solid var(--hover-background);
 }
 
-.actionBg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+.socialLink {
+  transition: all 500ms ease-out;
 }
 
-.actionBg svg {
-  width: 50%;
-  height: 50%;
-  fill: var(--fg-color-6);
-}
-
-.actionBgPane {
-  transition: all 300ms ease-out;
+.socialLink:hover {
   border-radius: 50%;
-  width: 0;
-  height: 0;
+  color: var(--hover-color);
+  background: var(--hover-background);
 }
 
-.action:hover {
-  transition: all 100ms ease-out;
-}
-
-.action:hover .actionBgPane {
-  width: 100%;
-  height: 100%;
-  transition: all 100ms ease-out;
-}
-
-.action:hover svg {
-  transition: fill 100ms ease-out;
-  fill: var(--bg-color);
-}
-
-:global(.dark-mode) .action:hover svg {
+:global(.dark-mode) .socialLink:hover svg {
   fill: var(--fg-color);
 }
 
-.facebook .actionBgPane {
-  background: #3b5998;
-}
-.facebook:hover {
-  border-color: #3b5998;
-}
-
-.twitter .actionBgPane {
-  background: #2795e9;
-}
-.twitter:hover {
-  border-color: #2795e9;
-}
-
-.linkedin .actionBgPane {
-  background: #0077b5;
-}
-.linkedin:hover {
-  border-color: #0077b5;
-}
-
-.github .actionBgPane {
-  background: #c9510c;
-}
-.github:hover {
-  border-color: #c9510c;
-}
-
-.youtube .actionBgPane {
-  background: #ff0000;
-}
-.youtube:hover {
-  border-color: #ff0000;
-}
-
-.medium .actionBgPane {
-  background: #00ab6c;
-}
-.medium:hover {
-  border-color: #00ab6c;
-}
-
-.newsletter .actionBgPane {
-  background: #777777;
-}
-.newsletter:hover {
-  border-color: #777777;
-}
-
-.email .actionBgPane {
-  background: #777;
-}
-.email:hover {
-  border-color: #777;
-}
-
 @media only screen and (max-width: 768px) {
   .links {
     position: relative;
     left: 0.5em;
     flex-wrap: wrap;
   }
 
-  .action:last-child {
+  .pageSocial a:last-child {
     margin-right: 1em;
   }
 }