extend icon component

zizdlp · Sep 11, 2024 · a609f20 · a609f20
1 parent 785e890
commit a609f20
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 55 deletions.
diff --git a/zbook_frontend/src/components/IconComponent.tsx b/zbook_frontend/src/components/IconComponent.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import {
+  FaGithub,
+  FaDiscord,
+  FaGoogle,
+  FaFacebook,
+  FaYoutube,
+  FaTwitter,
+  FaTwitch,
+  FaGitlab,
+  FaInstagram,
+  FaLine,
+} from "react-icons/fa"; // Import any other icons as needed
+import { FaBilibili } from "react-icons/fa6";
+import { BiLogoGmail } from "react-icons/bi";
+
+import { IoBook, IoShareSocialSharp } from "react-icons/io5";
+import { IconType } from "react-icons/lib";
+import { MdCloudSync, MdOutlineVisibility } from "react-icons/md";
+
+// Define a map of icon names to corresponding React icons
+const iconMap: Record<string, IconType> = {
+  github: FaGithub,
+  discord: FaDiscord,
+  google: FaGoogle,
+  facebook: FaFacebook,
+  youtube: FaYoutube,
+  twitter: FaTwitter,
+  twitch: FaTwitch,
+  gitlab: FaGitlab,
+  instagram: FaInstagram,
+  bilibili: FaBilibili,
+  line: FaLine,
+  gmail: BiLogoGmail,
+  MdCloudSync: MdCloudSync,
+  MdOutlineVisibility: MdOutlineVisibility,
+  IoBook: IoBook,
+  // Add more icon mappings here
+};
+
+// Default icon to use if the provided iconName is not found in the map
+const DefaultIcon = IoShareSocialSharp;
+
+export default function IconItem({
+  iconName,
+  className,
+}: {
+  iconName: string;
+  className?: string;
+}) {
+  // Determine which icon to use based on the iconName prop
+  const IconComponent: IconType = iconMap[iconName] || DefaultIcon;
+
+  return <IconComponent className={className} />;
+}
diff --git a/zbook_frontend/src/components/IconFilter.tsx b/zbook_frontend/src/components/IconFilter.tsx
diff --git a/zbook_frontend/src/components/MainContentFooter.tsx b/zbook_frontend/src/components/MainContentFooter.tsx
@@ -1,9 +1,9 @@
 import { FooterSocial } from "@/types/interface";
 import { getTranslations } from "next-intl/server";
 import { Link } from "@/navigation";
-import IconFilter from "./IconFilter";
 import TimeElement from "./TimeElement";
 import { ThemeColor } from "./TableOfContent";
+import IconItem from "./IconComponent";
 export default async function MainContentFooter({
   prev,
   next,
@@ -66,9 +66,9 @@ export default async function MainContentFooter({
         <div className="flex mb-6 space-x-3 sm:mb-0">
           {footers?.map((footer: FooterSocial, index: any) => (
             <Link key={index} className="group" href={footer.url}>
-              <IconFilter
-                icon_name={footer.icon}
-                class_name="h-5 w-5 fill-slate-500 group-hover:fill-slate-700"
+              <IconItem
+                iconName={footer.icon}
+                className="h-5 w-5 fill-slate-500 group-hover:fill-slate-700"
               />
             </Link>
           ))}

diff --git a/zbook_frontend/src/components/sidebars/RepoSideBarSettting.tsx b/zbook_frontend/src/components/sidebars/RepoSideBarSettting.tsx
@@ -1,17 +1,14 @@
 "use client";
 import { toast } from "react-toastify";
-import { IoBook } from "react-icons/io5";
 import {
   fetchServerWithAuthWrapper,
   refreshPage,
 } from "@/fetchs/server_with_auth";
 import { FetchServerWithAuthWrapperEndPoint } from "@/fetchs/server_with_auth_util";
 import { useTranslations } from "next-intl";
 import { FetchError } from "@/fetchs/util";
-import { MdCloudSync, MdOutlineVisibility } from "react-icons/md";
 import { Anchor } from "@/types/interface";
 import RepoSideBarSettingItem from "./RepoSideBarSetttingItem";
-import { FaDiscord, FaGithub } from "react-icons/fa";
 import { ThemeColor } from "../TableOfContent";
 import { usePathname } from "@/navigation";
 export default function RepoSideBarSetting({
@@ -85,7 +82,7 @@ export default function RepoSideBarSetting({
       <RepoSideBarSettingItem
         href={`/workspace/${username}/o/${reponame}/${first_path}`}
         selected={page_type != "~visi"}
-        icon={IoBook}
+        icon_name={"IoBook"}
         text={t("RepoHome")}
         theme_color={theme_color}
       />
@@ -97,7 +94,7 @@ export default function RepoSideBarSetting({
             }}
             selected={false}
             href="#"
-            icon={MdCloudSync}
+            icon_name={"MdCloudSync"}
             text={t("SyncRepo")}
             theme_color={theme_color}
           />
@@ -107,7 +104,7 @@ export default function RepoSideBarSetting({
               href={`/workspace/${username}/o/${reponame}/~visi`}
               text={t("VisibleTo")}
               selected={page_type == "~visi"}
-              icon={MdOutlineVisibility}
+              icon_name={"MdOutlineVisibility"}
               theme_color={theme_color}
             />
           )}
@@ -118,7 +115,7 @@ export default function RepoSideBarSetting({
           key={index}
           href={item.url}
           selected={false}
-          icon={item.icon == "github" ? FaGithub : FaDiscord}
+          icon_name={item.icon}
           text={item.name}
           theme_color={theme_color}
         />

diff --git a/zbook_frontend/src/components/sidebars/RepoSideBarSetttingItem.tsx b/zbook_frontend/src/components/sidebars/RepoSideBarSetttingItem.tsx
@@ -1,8 +1,7 @@
 "use client";
 
-import { useTranslations } from "next-intl";
-import { IconType } from "react-icons/lib";
 import { ThemeColor } from "../TableOfContent";
+import IconItem from "../IconComponent";
 function getSettingColorClasses(color: ThemeColor) {
   return {
     hoverClass: `group-hover:bg-${color}-500`,
@@ -14,33 +13,20 @@ export default function RepoSideBarSettingItem({
   href,
   selected,
   text,
-  icon,
+  icon_name,
   theme_color,
   onClick,
 }: {
   href: string;
   selected: boolean;
   text: string;
-  icon: IconType;
+  icon_name: string;
   theme_color: ThemeColor;
   onClick?: any;
 }) {
   let { hoverClass, selectedClass, selectBgClass } =
     getSettingColorClasses(theme_color);
-  const t = useTranslations("SideBar");
-  const IconText = ({
-    Icon,
-    selected,
-  }: {
-    Icon: IconType;
-    selected: boolean;
-  }) => (
-    <Icon
-      className={`h-4 w-4  ${
-        selected ? "fill-white" : "group-hover:fill-white"
-      }`}
-    />
-  );
+
   return (
     <li onClick={onClick}>
       <a
@@ -63,7 +49,12 @@ export default function RepoSideBarSettingItem({
             }
           `}
         >
-          <IconText Icon={icon} selected={selected} />
+          <IconItem
+            iconName={icon_name}
+            className={`h-4 w-4  ${
+              selected ? "fill-white" : "group-hover:fill-white"
+            }`}
+          />
         </div>
         {text}
       </a>

diff --git a/zbook_frontend/src/components/sidebars/UserSideBar.tsx b/zbook_frontend/src/components/sidebars/UserSideBar.tsx
@@ -8,7 +8,6 @@ import UserSideBarSocial from "./UserSideBarSocial";
 import UserSideBarAdmin from "./UserSideBarAdmin";
 import { FetchServerWithAuthWrapperEndPoint } from "@/fetchs/server_with_auth_util";
 import { getTranslations } from "next-intl/server";
-import SomeThingWrong from "../SomeThingWrong";
 import { FetchError } from "@/fetchs/util";
 import { logger } from "@/utils/logger";
 import OAuthWrapper from "./OAuthWrapper";