From a609f20d163aa4744ae14b52d81b81e21a18a7a6 Mon Sep 17 00:00:00 2001 From: SeeLey Wang Date: Wed, 11 Sep 2024 19:21:05 +0800 Subject: [PATCH] extend icon component --- .../src/components/IconComponent.tsx | 55 +++++++++++++++++++ zbook_frontend/src/components/IconFilter.tsx | 24 -------- .../src/components/MainContentFooter.tsx | 8 +-- .../sidebars/RepoSideBarSettting.tsx | 11 ++-- .../sidebars/RepoSideBarSetttingItem.tsx | 29 ++++------ .../src/components/sidebars/UserSideBar.tsx | 1 - 6 files changed, 73 insertions(+), 55 deletions(-) create mode 100644 zbook_frontend/src/components/IconComponent.tsx delete mode 100644 zbook_frontend/src/components/IconFilter.tsx diff --git a/zbook_frontend/src/components/IconComponent.tsx b/zbook_frontend/src/components/IconComponent.tsx new file mode 100644 index 0000000..7c80ea6 --- /dev/null +++ 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 = { + 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 ; +} diff --git a/zbook_frontend/src/components/IconFilter.tsx b/zbook_frontend/src/components/IconFilter.tsx deleted file mode 100644 index 66b04f6..0000000 --- a/zbook_frontend/src/components/IconFilter.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { FaDiscord, FaGithub } from "react-icons/fa"; -import { IconType } from "react-icons/lib"; - -const IconText = ({ - Icon, - class_name, -}: { - Icon: IconType; - class_name: string; -}) => ; -export default function IconFilter({ - icon_name, - class_name, -}: { - icon_name: string; - class_name: string; -}) { - if (icon_name == "discord") { - return ; - } else if (icon_name == "github") { - return ; - } - return <>; -} diff --git a/zbook_frontend/src/components/MainContentFooter.tsx b/zbook_frontend/src/components/MainContentFooter.tsx index 3b560cc..f880887 100644 --- 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({
{footers?.map((footer: FooterSocial, index: any) => ( - ))} diff --git a/zbook_frontend/src/components/sidebars/RepoSideBarSettting.tsx b/zbook_frontend/src/components/sidebars/RepoSideBarSettting.tsx index f18b265..ed856d2 100644 --- a/zbook_frontend/src/components/sidebars/RepoSideBarSettting.tsx +++ b/zbook_frontend/src/components/sidebars/RepoSideBarSettting.tsx @@ -1,6 +1,5 @@ "use client"; import { toast } from "react-toastify"; -import { IoBook } from "react-icons/io5"; import { fetchServerWithAuthWrapper, refreshPage, @@ -8,10 +7,8 @@ import { 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({ @@ -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 index 229a723..42aceca 100644 --- 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; - }) => ( - - ); + return (
  • - +
    • {text} diff --git a/zbook_frontend/src/components/sidebars/UserSideBar.tsx b/zbook_frontend/src/components/sidebars/UserSideBar.tsx index 9e7a078..fe47a04 100644 --- 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";