From 131a29b539053a3f4639b3ab60bec9604e3cd5dc Mon Sep 17 00:00:00 2001
From: PrinOrange <prinorange@outlook.com>
Date: Fri, 16 Aug 2024 11:33:24 +0800
Subject: [PATCH] [update] add more platform social IDs

---
 .vscode/settings.json            |  1 +
 components/utils/SocialIcons.tsx | 41 ++++++++++++++++++++++++++++----
 data/config.ts                   | 10 ++++++--
 types/config.type.ts             |  4 ++++
 4 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index a5f8536..fada709 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,6 +2,7 @@
   "cSpell.words": [
     "alipay",
     "autocorrect",
+    "bilibili",
     "frontmatter",
     "Frontmatters",
     "giscus",
diff --git a/components/utils/SocialIcons.tsx b/components/utils/SocialIcons.tsx
index 6812c73..b9f7c3a 100644
--- a/components/utils/SocialIcons.tsx
+++ b/components/utils/SocialIcons.tsx
@@ -1,11 +1,19 @@
 import { Config } from "@/data/config";
 import Link from "next/link";
 import { FiGithub, FiInstagram, FiMail, FiTwitter } from "react-icons/fi";
-import { TbBrandFacebook, TbBrandLinkedin, TbBrandMastodon } from "react-icons/tb";
+import {
+  TbBrandBilibili,
+  TbBrandFacebook,
+  TbBrandLinkedin,
+  TbBrandMastodon,
+  TbBrandReddit,
+  TbBrandTelegram,
+  TbBrandYoutube,
+} from "react-icons/tb";
 
 export const SocialIcons = () => {
   return (
-    <div className="my-5 flex justify-center space-x-4 font-bold text-2xl">
+    <div className="my-5 flex flex-wrap justify-center space-x-4 font-bold text-2xl">
       {Config.SocialLinks.twitter && (
         <Link href={`https://x.com/${Config.SocialLinks.twitter}`} target="_blank" title="Twitter">
           <FiTwitter className="hover:text-sky-500" />
@@ -16,21 +24,46 @@ export const SocialIcons = () => {
           <TbBrandMastodon className="hover:text-purple-500" />
         </Link>
       )}
+      {Config.SocialLinks.bilibili && (
+        <Link href={`https://space.bilibili.com/${Config.SocialLinks.bilibili}`} target="_blank" title="Bilibili">
+          <TbBrandBilibili className="hover:text-sky-500" />
+        </Link>
+      )}
+      {Config.SocialLinks.reddit && (
+        <Link href={`https://reddit.com/user/${Config.SocialLinks.reddit}`} target="_blank" title="Reddit">
+          <TbBrandReddit className="hover:text-red-500" />
+        </Link>
+      )}
+      {Config.SocialLinks.youtube && (
+        <Link href={`https://youtube.com/@${Config.SocialLinks.youtube}`} target="_blank" title="Youtube">
+          <TbBrandYoutube className="hover:text-red-500" />
+        </Link>
+      )}
       {Config.SocialLinks.instagram && (
         <Link href={`https://instagram.com/${Config.SocialLinks.instagram}`} target="_blank" title="Instagram">
           <FiInstagram className="hover:text-orange-500" />
         </Link>
       )}
       {Config.SocialLinks.facebook && (
-        <Link href={`https://instagram.com/${Config.SocialLinks.facebook}`} target="_blank" title="Instagram">
+        <Link href={`https://instagram.com/${Config.SocialLinks.facebook}`} target="_blank" title="Facebook">
           <TbBrandFacebook className="hover:text-blue-500" />
         </Link>
       )}
       {Config.SocialLinks.linkedin && (
-        <Link href={`https://linkedin.com/in/${Config.SocialLinks.linkedin}`} target="_blank" title="Instagram">
+        <Link href={`https://linkedin.com/in/${Config.SocialLinks.linkedin}`} target="_blank" title="LinkedIn">
           <TbBrandLinkedin className="hover:text-blue-500" />
         </Link>
       )}
+      {Config.SocialLinks.youtube && (
+        <Link href={`https://youtube.com/@${Config.SocialLinks.youtube}`} target="_blank" title="Youtube">
+          <TbBrandYoutube className="hover:text-red-500" />
+        </Link>
+      )}
+      {Config.SocialLinks.telegram && (
+        <Link href={`https://t.me/${Config.SocialLinks.telegram}`} target="_blank" title="Telegram">
+          <TbBrandTelegram className="hover:text-blue-500" />
+        </Link>
+      )}
       {Config.SocialLinks.github && (
         <Link href={`https://github.com/${Config.SocialLinks.github}`} target="_blank" title="Github">
           <FiGithub className="hover:text-gray-500" />
diff --git a/data/config.ts b/data/config.ts
index f48f362..07d8744 100644
--- a/data/config.ts
+++ b/data/config.ts
@@ -23,10 +23,16 @@ export const Config: TConfig = {
   SocialLinks: {
     twitter: "example", // Twitter ID
     instagram: "example", // Instagram ID
+    linkedin: "example", // Linkedin ID
     github: "example", // Github ID
     facebook: "example", // Facebook ID
-    linkedin: "example", // Linkedin ID
-    mastodon: "https://mas.to/@example", // Mastodon link
+
+    // Add more platform IDs here.
+    // youtube: "example", // Channel ID
+    // reddit:"example", // Reddit ID
+    // bilibili:"123456",  // Bilibili Number ID
+    // telegram: "example", // Telegram ID
+    // mastodon: "https://mas.to/@example", // Mastodon link
     email: "me@example.com", // Email address, required.
   },
 
diff --git a/types/config.type.ts b/types/config.type.ts
index b41b998..352f200 100644
--- a/types/config.type.ts
+++ b/types/config.type.ts
@@ -12,11 +12,15 @@ export type TConfig = {
 
   SocialLinks: {
     twitter?: string;
+    bilibili?: string;
+    reddit?: string;
     facebook?: string;
     instagram?: string;
     github?: string;
     mastodon?: string;
     linkedin?: string;
+    youtube?: string;
+    telegram?: string;
     email: string;
   };