feat: replace SiteHeaderLink with common Tabs

src/components/dashboard/SettingsLayout.tsx

@@ -1,4 +1,4 @@
-import { useParams, usePathname } from "next/navigation"
+import { useParams } from "next/navigation"
 import React from "react"
 
 import { useXSettingsModal } from "@crossbell/connect-kit"
@@ -18,7 +18,6 @@ export const SettingsLayout = ({
   const { t } = useTranslation("dashboard")
   const xSettingsModal = useXSettingsModal()
 
-  const pathname = usePathname()
   const params = useParams()
   const subdomain = params?.subdomain as string
   const tabItems: TabItem[] = [
@@ -45,7 +44,7 @@ export const SettingsLayout = ({
       text: "Export data",
       href: `https://export.crossbell.io/?handle=${subdomain}`,
     },
-  ].map((item) => ({ ...item, active: pathname === item.href }))
+  ]
 
   return (
     <DashboardMain>

src/components/home/HomeActivitiesTabs.tsx

@@ -18,22 +18,18 @@ export const HomeActivitiesTabs = () => {
     {
       text: "Featured",
       href: "/",
-      active: pathname === "/",
     },
     {
       text: "Shorts",
       href: "/shorts",
-      active: pathname === "/shorts",
     },
     {
       text: "Latest",
       href: "/latest",
-      active: pathname === "/latest",
     },
     {
       text: "Hottest",
       href: "/hottest",
-      active: pathname === "/hottest",
     },
     {
       text: "Following",
@@ -43,7 +39,6 @@ export const HomeActivitiesTabs = () => {
     ...topics.map((topic) => ({
       text: t(topic.name),
       href: `/topic/${encodeURIComponent(topic.name)}`,
-      active: pathname === `/topic/${encodeURIComponent(topic.name)}`,
     })),
   ]
 

src/components/site/SiteHeader.tsx

@@ -3,6 +3,7 @@ import NextImage from "next/image"
 import { FollowingButton } from "~/components/common/FollowingButton"
 import { FollowingCount } from "~/components/common/FollowingCount"
 import { PatronButton } from "~/components/common/PatronButton"
+import { type TabItem, Tabs } from "~/components/ui/Tabs"
 import getQueryClient from "~/lib/query-client"
 import { cn } from "~/lib/utils"
 import { fetchGetSite } from "~/queries/site.server"
@@ -10,7 +11,6 @@ import { fetchGetSite } from "~/queries/site.server"
 import { ConnectButton } from "../common/ConnectButton"
 import { Avatar } from "../ui/Avatar"
 import ConnectedAccounts from "./ConnectedAccounts"
-import { HeaderLink, type HeaderLinkType } from "./SiteHeaderLink"
 import { SiteHeaderMenu } from "./SiteHeaderMenu"
 
 export const SiteHeader = async ({
@@ -26,14 +26,17 @@ export const SiteHeader = async ({
   const queryClient = getQueryClient()
 
   const site = await fetchGetSite(handle, queryClient)
-  const leftLinks: HeaderLinkType[] = site?.metadata?.content?.navigation?.find(
-    (nav) => nav.url === "/",
-  )
-    ? site.metadata?.content?.navigation
-    : [
-        { label: "Home", url: "/" },
-        ...(site?.metadata?.content?.navigation || []),
-      ]
+  const leftLinks: TabItem[] = (
+    site?.metadata?.content?.navigation?.find((nav) => nav.url === "/")
+      ? site.metadata?.content?.navigation
+      : [
+          { label: "Home", url: "/" },
+          ...(site?.metadata?.content?.navigation || []),
+        ]
+  ).map((tab) => ({
+    text: tab.label,
+    href: tab.url,
+  }))
 
   return (
     <header className="xlog-header border-b border-zinc-100 relative">
@@ -126,11 +129,10 @@ export const SiteHeader = async ({
         </div>
         {!hideNavigation && (
           <div className="text-gray-500 flex items-center justify-between w-full mt-auto">
-            <div className="xlog-site-navigation flex items-center sm:gap-2 mx-[-.5rem] min-w-0 text-sm sm:text-base overflow-x-auto">
-              {leftLinks.map((link, i) => {
-                return <HeaderLink link={link} key={`${link.label}${i}`} />
-              })}
-            </div>
+            <Tabs
+              items={leftLinks}
+              className="xlog-site-navigation border-none mb-0"
+            />
             <div className="xlog-site-connect pl-1">
               <ConnectButton variant="text" mobileSimplification={true} />
             </div>

src/components/site/SiteHeaderLink.tsx

@@ -1,38 +0,0 @@
-"use client"
-
-import { usePathname } from "next/navigation"
-
-import { getSiteRelativeUrl } from "~/lib/helpers"
-import { useTranslation } from "~/lib/i18n/client"
-import { cn } from "~/lib/utils"
-
-import { UniLink } from "../ui/UniLink"
-
-export type HeaderLinkType = {
-  icon?: React.ReactNode
-  label: string
-  url?: string
-  onClick?: () => void
-}
-
-export const HeaderLink = ({ link }: { link: HeaderLinkType }) => {
-  const pathname = usePathname()
-  const { t } = useTranslation("site")
-  if (link.url) {
-    link.url = getSiteRelativeUrl(pathname, link.url)
-  }
-
-  const active = pathname === link.url
-  return (
-    <UniLink
-      href={link.url}
-      onClick={link.onClick}
-      className={cn("xlog-site-navigation-item", {
-        "xlog-site-navigation-item-active": active,
-      })}
-    >
-      {link.icon && <span>{link.icon}</span>}
-      <span className="whitespace-nowrap">{t(link.label)}</span>
-    </UniLink>
-  )
-}

src/components/ui/Tabs.tsx

@@ -1,3 +1,6 @@
+"use client"
+
+import { usePathname } from "next/navigation"
 import React from "react"
 
 import { Tooltip } from "~/components/ui/Tooltip"
@@ -23,6 +26,14 @@ export const Tabs = ({
   className?: string
 }) => {
   const { t } = useTranslation("dashboard")
+  const pathname = usePathname()
+
+  items = items.map((item) => {
+    if (item.href) {
+      item.active = pathname === item.href
+    }
+    return item
+  })
 
   return (
     <div
@@ -40,10 +51,11 @@ export const Tabs = ({
             onClick={item.onClick}
             key={item.text}
             className={cn(
-              `border-b-2 inline-flex items-center h-10 whitespace-nowrap cursor-pointer`,
+              "inline-flex items-center h-10 whitespace-nowrap cursor-pointer transition-colors focus-ring relative",
+              "after:absolute after:h-[2px] after:transition-[left,right] after:bottom-0",
               item.active
-                ? `border-accent text-black font-medium`
-                : `text-gray-500  border-transparent hover:border-gray-300`,
+                ? "text-black font-medium after:left-0 after:right-0 after:bg-accent"
+                : "text-gray-500 hover:text-gray-700 after:left-1/2 after:right-1/2 hover:after:left-0 hover:after:right-0 after:bg-gray-700",
             )}
           >
             {item.tooltip ? (

src/css/tailwind.css

@@ -414,25 +414,6 @@ textarea.input {
   line-height: unset;
 }
 
-.xlog-site-navigation-item {
-  @apply h-10 px-2 flex items-center space-x-1 transition-colors focus-ring;
-  @apply hover:text-gray-700;
-
-  /* The underline */
-  @apply relative;
-  @apply after:absolute after:block after:content-[''] after:h-[2px] after:transition-[left,right] after:bottom-0 after:left-1/2 after:right-1/2 after:bg-gray-700;
-  @apply hover:after:left-2 hover:after:right-2;
-}
-
-/* TODO-Doma */
-/* Maybe use CSS nested syntax */
-.xlog-site-navigation-item-active {
-  @apply text-accent hover:text-accent;
-
-  /* The underline */
-  @apply after:left-2 after:right-2 after:bg-accent;
-}
-
 /* For users to use within posts */
 .center {
   @apply flex justify-center;