From 87d03ba4296f0360bc11e84a39c2b4081d7d483f Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Sat, 6 May 2023 22:00:43 +0100
Subject: [PATCH] fix: home tabs highlight

---
 src/app/(home)/layout.tsx        | 39 ++--------------------
 src/components/home/HomeTabs.tsx | 55 ++++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 37 deletions(-)
 create mode 100644 src/components/home/HomeTabs.tsx

diff --git a/src/app/(home)/layout.tsx b/src/app/(home)/layout.tsx
index 9d2c85fe..66c3070a 100644
--- a/src/app/(home)/layout.tsx
+++ b/src/app/(home)/layout.tsx
@@ -1,33 +1,11 @@
 import { ConnectButton } from "~/components/common/ConnectButton"
 import { DarkModeSwitch } from "~/components/common/DarkModeSwitch"
 import { Logo } from "~/components/common/Logo"
-import { Image } from "~/components/ui/Image"
+import HomeTabs from "~/components/home/HomeTabs"
 import { UniLink } from "~/components/ui/UniLink"
 import { APP_NAME, DISCORD_LINK, GITHUB_LINK, TWITTER_LINK } from "~/lib/env"
 import { getSiteLink } from "~/lib/helpers"
 import { useTranslation } from "~/lib/i18n"
-import { cn } from "~/lib/utils"
-
-const tabs = [
-  {
-    name: "Home",
-    link: "/",
-  },
-  {
-    name: "Activities",
-    link: "/activities",
-  },
-  {
-    name: (
-      <Image
-        className="no-optimization w-24"
-        alt="github stars"
-        src="https://img.shields.io/github/stars/Crossbell-Box/xLog?color=white&label=Stars&logo=github&style=social"
-      />
-    ),
-    link: GITHUB_LINK,
-  },
-]
 
 export default async function HomeLayout({
   children,
@@ -50,20 +28,7 @@ export default async function HomeLayout({
             xLog
           </UniLink>
           <div className="space-x-14 text-zinc-500 flex">
-            {tabs?.map((tab, index) => (
-              <UniLink
-                className={cn(
-                  "cursor-pointer items-center hidden sm:flex hover:text-accent text-lg",
-                  {
-                    "text-accent": "/" === tab.link,
-                  },
-                )}
-                key={tab.link}
-                href={tab.link}
-              >
-                {typeof tab.name === "string" ? t(tab.name) : tab.name}
-              </UniLink>
-            ))}
+            <HomeTabs />
             <ConnectButton size="base" variantColor="black" />
           </div>
         </div>
diff --git a/src/components/home/HomeTabs.tsx b/src/components/home/HomeTabs.tsx
new file mode 100644
index 00000000..24ab3b04
--- /dev/null
+++ b/src/components/home/HomeTabs.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import { usePathname } from "next/navigation"
+
+import { Image } from "~/components/ui/Image"
+import { GITHUB_LINK } from "~/lib/env"
+import { useTranslation } from "~/lib/i18n/client"
+import { cn } from "~/lib/utils"
+
+import { UniLink } from "../ui/UniLink"
+
+const tabs = [
+  {
+    name: "Home",
+    link: "/",
+  },
+  {
+    name: "Activities",
+    link: "/activities",
+  },
+  {
+    name: (
+      <Image
+        className="no-optimization w-24"
+        alt="github stars"
+        src="https://img.shields.io/github/stars/Crossbell-Box/xLog?color=white&label=Stars&logo=github&style=social"
+      />
+    ),
+    link: GITHUB_LINK,
+  },
+]
+
+export default function HomeTabs() {
+  const pathname = usePathname()
+  const { t } = useTranslation("index")
+
+  return (
+    <>
+      {tabs?.map((tab, index) => (
+        <UniLink
+          className={cn(
+            "cursor-pointer items-center hidden sm:flex hover:text-accent text-lg",
+            {
+              "text-accent": pathname === tab.link,
+            },
+          )}
+          key={tab.link}
+          href={tab.link}
+        >
+          {typeof tab.name === "string" ? t(tab.name) : tab.name}
+        </UniLink>
+      ))}
+    </>
+  )
+}