From 6078c9f3e4be5f53d738d7dbbaa4fae8dfb2c408 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Fri, 20 Dec 2024 17:27:45 +0800
Subject: [PATCH] feat: custom links

---
 src/components/Header.tsx | 40 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 0482abf..1d3fff5 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -62,16 +62,54 @@ function Header() {
           <p className="hidden text-sm font-medium opacity-40 md:block">{customDesc}</p>
         </section>
         <section className="flex items-center gap-2">
+          <div className="hidden sm:block">
+            <Links />
+          </div>
           <DashboardLink />
           <LanguageSwitcher />
           <ModeToggle />
         </section>
       </section>
+      <div className="w-full justify-items-end sm:hidden mt-1">
+        <Links />
+      </div>
       <Overview />
     </div>
   )
 }
 
+type links = {
+  link: string
+  name: string
+}
+
+function Links() {
+  // @ts-expect-error CustomLinks is a global variable
+  const customLinks = window.CustomLinks as string
+
+  const links: links[] | null = customLinks ? JSON.parse(customLinks) : null
+
+  if (!links) return null
+
+  return (
+    <div className="flex items-center gap-2 w-fit">
+      {links.map((link, index) => {
+        return (
+          <a
+            key={index}
+            href={link.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-1 text-sm font-medium opacity-50 transition-opacity hover:opacity-100"
+          >
+            {link.name}
+          </a>
+        )
+      })}
+    </div>
+  )
+}
+
 function DashboardLink() {
   const { t } = useTranslation()
   const { data: userData } = useQuery({
@@ -87,7 +125,7 @@ function DashboardLink() {
         href={"/dashboard"}
         target="_blank"
         rel="noopener noreferrer"
-        className="flex items-center gap-1 text-sm font-medium opacity-50 transition-opacity hover:opacity-100"
+        className="flex items-center text-nowrap gap-1 text-sm font-medium opacity-50 transition-opacity hover:opacity-100"
       >
         {!userData?.data?.id && t("login")}
         {userData?.data?.id && t("dashboard")}