From 17131893334fa13dea84c139efc23af02b9255a6 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Thu, 6 Feb 2025 00:20:05 +0800
Subject: [PATCH] refactor: improve Footer component with modular link styling
 and constants

---
 app/(main)/footer.tsx | 53 +++++++++++++++++++++++++++----------------
 1 file changed, 34 insertions(+), 19 deletions(-)

diff --git a/app/(main)/footer.tsx b/app/(main)/footer.tsx
index 6370577..7958feb 100644
--- a/app/(main)/footer.tsx
+++ b/app/(main)/footer.tsx
@@ -1,38 +1,53 @@
 import pack from "@/package.json"
 import { useTranslations } from "next-intl"
 
+const GITHUB_URL = "https://github.com/hamster1963/nezha-dash"
+const PERSONAL_URL = "https://buycoffee.top"
+
+type LinkProps = {
+  href: string
+  children: React.ReactNode
+}
+
+const FooterLink = ({ href, children }: LinkProps) => (
+  <a
+    href={href}
+    target="_blank"
+    className="cursor-pointer font-normal underline decoration-yellow-500 hover:decoration-yellow-600 transition-colors decoration-2 underline-offset-2 dark:decoration-yellow-500/60 dark:hover:decoration-yellow-500/80"
+    rel="noreferrer"
+  >
+    {children}
+  </a>
+)
+
+const baseTextStyles = "text-[13px] font-light tracking-tight text-neutral-600/50 dark:text-neutral-300/50"
+
 export default function Footer() {
   const t = useTranslations("Footer")
   const version = pack.version
+  const currentYear = new Date().getFullYear()
+
   return (
     <footer className="mx-auto w-full max-w-5xl flex items-center justify-between">
       <section className="flex flex-col">
-        <p className="mt-3 flex gap-1 text-[13px] font-light tracking-tight text-neutral-600/50 dark:text-neutral-300/50">
+        <p className={`mt-3 flex gap-1 ${baseTextStyles}`}>
           {t("p_146-598_Findthecodeon")}{" "}
-          <a
-            href="https://github.com/hamster1963/nezha-dash"
-            target="_blank"
-            className="cursor-pointer font-normal underline decoration-yellow-500 hover:decoration-yellow-600 transition-colors decoration-2 underline-offset-2 dark:decoration-yellow-500/60 dark:hover:decoration-yellow-500/80"
-            rel="noreferrer"
-          >
+          <FooterLink href={GITHUB_URL}>
             {t("a_303-585_GitHub")}
-          </a>
-          <a
-            href={`https://github.com/hamster1963/nezha-dash/releases/tag/v${version}`}
-            target="_blank"
-            className="cursor-pointer font-normal underline decoration-yellow-500 hover:decoration-yellow-600 transition-colors decoration-2 underline-offset-2 dark:decoration-yellow-500/60 dark:hover:decoration-yellow-500/80"
-            rel="noreferrer"
-          >
+          </FooterLink>
+          <FooterLink href={`${GITHUB_URL}/releases/tag/v${version}`}>
             v{version}
-          </a>
+          </FooterLink>
         </p>
-        <section className="mt-1 flex items-center gap-2 text-[13px] font-light tracking-tight text-neutral-600/50 dark:text-neutral-300/50">
+        <section className={`mt-1 flex items-center gap-2 ${baseTextStyles}`}>
           {t("section_607-869_2020")}
-          {new Date().getFullYear()}{" "}
-          <a href={"https://buycoffee.top"}>{t("a_800-850_Hamster1963")}</a>
+          {currentYear}{" "}
+          <FooterLink href={PERSONAL_URL}>
+            {t("a_800-850_Hamster1963")}
+          </FooterLink>
         </section>
       </section>
-      <p className="mt-1 text-[13px] font-light tracking-tight text-neutral-600/50 dark:text-neutral-300/50">
+      <p className={`mt-1 ${baseTextStyles}`}>
         <kbd className="pointer-events-none mx-1 inline-flex h-4 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
           <span className="text-xs">⌘</span>K
         </kbd>