5

Author: sukebe828

components/Footer.tsx

@@ -1,10 +1,18 @@
+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 { useDarkMode } from 'lib/use-dark-mode'
-import * as types from 'lib/types'
-import styles from './Footer.module.css'
-import { FooterConfig } from './Footer.config'
-import Script from 'next/script'
+import * as config from '@/lib/config'
+import { useDarkMode } from '@/lib/use-dark-mode'
+
+import styles from './styles.module.css'
 
 export function FooterImpl() {
   const [hasMounted, setHasMounted] = React.useState(false)
@@ -13,30 +21,112 @@ export function FooterImpl() {
 
   React.useEffect(() => {
     setHasMounted(true)
-    // 初始化 Ko-fi widget
-    if (typeof window !== 'undefined' && (window as any).kofiWidgetOverlay) {
-      (window as any).kofiWidgetOverlay.draw('meow828', {
-        type: 'floating-chat',
-        'floating-chat.donateButton.text': 'Support me',
-        'floating-chat.donateButton.background-color': '#00b9fe',
-        'floating-chat.donateButton.text-color': '#fff'
-      })
-    }
   }, [])
 
   return (
-    <>
-      {/* 載入 Ko-fi overlay widget script */}
-      <Script
-        src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"
-        strategy="afterInteractive"
-      />
-      <footer className={styles.footer}>
-        {/* 你原本 footer 嘅內容保持唔變 */}
-        <div className={styles.copyright}>
-          © {currentYear} Meow828 • All rights reserved.
-        </div>
-      </footer>
-    </>
+    <footer className={styles.footer}>
+      <div className={styles.copyright}>
+        Copyright {currentYear} {config.author}
+      </div>
+
+      <div className={styles.settings}>
+        {hasMounted && (
+          <a
+            className={styles.toggleDarkMode}
+            href='#'
+            role='button'
+            onClick={onToggleDarkMode}
+            title='Toggle dark mode'
+          >
+            {isDarkMode ? <IoMoonSharp /> : <IoSunnyOutline />}
+          </a>
+        )}
+      </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>
+        )}
+      </div>
+    </footer>
   )
 }