refactor: TabNav; deprecate CategoriesNav, ResourcesNav

app/[locale]/apps/categories/[catetgoryName]/page.tsx

@@ -6,7 +6,7 @@ import {
   setRequestLocale,
 } from "next-intl/server"
 
-import { AppCategoryEnum } from "@/lib/types"
+import { AppCategoryEnum, type SectionNavDetails } from "@/lib/types"
 
 import { SimpleHero } from "@/components/Hero"
 import I18nProvider from "@/components/I18nProvider"
@@ -19,6 +19,7 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb"
+import TabNav from "@/components/ui/TabNav"
 
 import { getHighlightedApps } from "@/lib/utils/apps"
 import { dataLoader } from "@/lib/utils/data/dataLoader"
@@ -31,7 +32,6 @@ import { BASE_TIME_UNIT } from "@/lib/constants"
 
 import AppsHighlight from "../../_components/AppsHighlight"
 import AppsTable from "../../_components/AppsTable"
-import CategoriesNav from "../../_components/CategoriesNav"
 import SuggestAnApp from "../../_components/SuggestAnApp"
 
 import { fetchApps } from "@/lib/api/fetchApps"
@@ -88,6 +88,15 @@ const Page = async ({
     categoryEnum as AppCategoryEnum
   )
 
+  const navSections: SectionNavDetails[] = Object.values(appsCategories).map(
+    ({ name, icon: Icon, slug }) => ({
+      key: slug,
+      label: t(name),
+      href: `/apps/categories/${slug}`,
+      icon: (<Icon className="h-4 w-4" />) as React.ReactElement,
+    })
+  )
+
   return (
     <I18nProvider locale={locale} messages={messages}>
       <div className="flex flex-col gap-12">
@@ -112,10 +121,14 @@ const Page = async ({
           title={t(category.name)}
           subtitle={t(category.description)}
         />
-
-        <div className="flex flex-col gap-4 px-4 md:px-8">
-          <CategoriesNav activeCategory={categoryEnum} />
-        </div>
+        <TabNav
+          sections={navSections}
+          activeSection={categoryEnum}
+          customEventOptions={{
+            eventCategory: "categories_page",
+            eventAction: "navigation",
+          }}
+        />
 
         <MainArticle className="flex flex-col gap-32 py-10">
           <div className="flex flex-col px-4 md:px-8">

app/[locale]/resources/page.tsx

@@ -1,6 +1,6 @@
 import { getTranslations } from "next-intl/server"
 
-import { Lang } from "@/lib/types"
+import type { Lang } from "@/lib/types"
 
 import BannerNotification from "@/components/Banners/BannerNotification"
 import { HubHero } from "@/components/Hero"
@@ -12,6 +12,7 @@ import { ButtonLink } from "@/components/ui/buttons/Button"
 import { Stack, VStack } from "@/components/ui/flex"
 import Link from "@/components/ui/Link"
 import { Section } from "@/components/ui/section"
+import TabNav, { StickyContainer } from "@/components/ui/TabNav"
 
 import { cn } from "@/lib/utils/cn"
 import { dataLoader } from "@/lib/utils/data/dataLoader"
@@ -20,7 +21,6 @@ import { getMetadata } from "@/lib/utils/metadata"
 import { GITHUB_REPO_URL } from "@/lib/constants"
 import { BASE_TIME_UNIT } from "@/lib/constants"
 
-import ResourcesNav from "./_components/ResourcesNav"
 import { ResourceItem, ResourcesContainer } from "./_components/ResourcesUI"
 import { getResources } from "./utils"
 
@@ -75,26 +75,28 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
       />
 
       <Stack className="gap-4 px-2 py-6 md:gap-8 md:px-4 lg:px-8 xl:gap-11">
-        <div className="sticky top-5 z-docked flex flex-col items-center gap-3 text-center md:top-6 md:px-2">
-          <div className="my-2 text-body-medium">
+        <StickyContainer className="top-[26px] space-y-5">
+          <div className="my-2 text-center text-body-medium">
             {t("page-resources-whats-on-this-page")}
           </div>
-          <ResourcesNav
-            resourceSections={resourceSections}
-            eventCategory={EVENT_CATEGORY}
+          <TabNav
+            sections={resourceSections}
+            customEventOptions={{
+              eventCategory: EVENT_CATEGORY,
+              eventAction: "whats_on_this_page",
+            }}
+            useMotion
           />
-        </div>
+        </StickyContainer>
         <Stack className="gap-11 pt-12 md:gap-16 lg:gap-24">
-          {resourceSections.map(({ key, icon, title: sectionTitle, boxes }) => (
+          {resourceSections.map(({ key, icon, label, boxes }) => (
             <Stack key={key} asChild>
-              <section id={key} className="scroll-mt-40 gap-8 md:gap-6">
+              <section id={key} className="!scroll-mt-40 gap-8 md:gap-6">
                 <div className="group flex w-full items-center gap-4 border-b bg-transparent px-2 py-4">
                   <div className="grid size-12 place-items-center rounded-lg border border-border-low-contrast text-2xl [&_svg]:shrink-0">
                     {icon || <StackIcon />}
                   </div>
-                  <h2 className="flex-1 text-start font-black">
-                    {sectionTitle}
-                  </h2>
+                  <h2 className="flex-1 text-start font-black">{label}</h2>
                 </div>
                 <div className="grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-y-6">
                   {boxes.map(({ title, metric, items, className }) => (

app/[locale]/resources/types.ts

@@ -1,5 +1,7 @@
 import type { StaticImageData } from "next/image"
 
+import type { SectionNavDetails } from "@/lib/types"
+
 export type Item = {
   title: string
   description: string
@@ -15,9 +17,6 @@ export type DashboardBox = {
   className?: string
 }
 
-export type DashboardSection = {
-  key: string
-  title: string
+export type DashboardSection = SectionNavDetails & {
   boxes: DashboardBox[]
-  icon?: React.ReactNode
 }

app/[locale]/resources/utils.tsx

@@ -553,31 +553,31 @@ export const getResources = async ({
   const resources = [
     {
       key: "network",
-      title: t("page-resources-network-title"),
+      label: t("page-resources-network-title"),
       icon: <SectionIconEthGlyph />,
       boxes: networkBoxes,
     },
     {
       key: "using",
-      title: t("page-resources-using-title"),
+      label: t("page-resources-using-title"),
       icon: <SectionIconEthWallet />,
       boxes: usingBoxes,
     },
     {
       key: "scaling",
-      title: t("page-resources-scaling-title"),
+      label: t("page-resources-scaling-title"),
       icon: <SectionIconArrowsFullscreen />,
       boxes: scalingBoxes,
     },
     {
       key: "resilience",
-      title: t("page-resources-resilience-title"),
+      label: t("page-resources-resilience-title"),
       icon: <SectionIconHeartPulse />,
       boxes: resilienceBoxes,
     },
     {
       key: "privacy-security",
-      title: t("page-resources-privacy-security-title"),
+      label: t("page-resources-privacy-security-title"),
       icon: <SectionIconPrivacy />,
       boxes: privacySecurityBoxes,
     },

src/components/BoxGrid.tsx

@@ -1,7 +1,9 @@
 import React, { useState } from "react"
 
+import type { MatomoEventOptions } from "@/lib/types"
+
 import { cn } from "@/lib/utils/cn"
-import { MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
+import { trackCustomEvent } from "@/lib/utils/matomo"
 
 import { Flex } from "./ui/flex"
 import Emoji from "./Emoji"

src/components/CardList.tsx

@@ -4,10 +4,12 @@ import { ExternalLink } from "lucide-react"
 import TwImage, { type ImageProps } from "next/image"
 import type { ReactNode } from "react"
 
+import type { MatomoEventOptions } from "@/lib/types"
+
 import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
 
 import { cn } from "@/lib/utils/cn"
-import { MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
+import { trackCustomEvent } from "@/lib/utils/matomo"
 import * as url from "@/lib/utils/url"
 
 import { BaseLink } from "./ui/Link"

src/components/Hero/CallToAction.tsx

@@ -2,14 +2,16 @@
 
 import type { ReactNode } from "react"
 
+import type { MatomoEventOptions } from "@/lib/types"
+
 import {
   Button,
   ButtonLink,
   type ButtonProps,
 } from "@/components/ui/buttons/Button"
 
 import { cn } from "@/lib/utils/cn"
-import { type MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
+import { trackCustomEvent } from "@/lib/utils/matomo"
 
 export type CallToActionProps = Omit<
   ButtonProps,

src/components/PageHero.tsx

@@ -1,9 +1,10 @@
 import type { ReactNode } from "react"
 
+import type { MatomoEventOptions } from "@/lib/types"
+
 import { Image, type ImageProps } from "@/components/Image"
 
 import { cn } from "@/lib/utils/cn"
-import { type MatomoEventOptions } from "@/lib/utils/matomo"
 
 import {
   Button,

src/components/Staking/StakingComparison.tsx

@@ -1,6 +1,10 @@
 "use client"
 
-import type { StakingPage, TranslationKey } from "@/lib/types"
+import type {
+  MatomoEventOptions,
+  StakingPage,
+  TranslationKey,
+} from "@/lib/types"
 
 import {
   StakingGlyphCloudIcon,
@@ -9,7 +13,7 @@ import {
 } from "@/components/icons/staking"
 
 import { cn } from "@/lib/utils/cn"
-import { MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
+import { trackCustomEvent } from "@/lib/utils/matomo"
 
 import { Flex } from "../ui/flex"
 import InlineLink from "../ui/Link"

src/components/Staking/StakingProductsCardGrid/types.ts

@@ -1,4 +1,4 @@
-import type { MatomoEventOptions } from "@/lib/utils/matomo"
+import type { MatomoEventOptions } from "@/lib/types"
 
 import type stakingProducts from "@/data/staking-products.json"
 

src/components/SubpageCard.tsx

@@ -1,10 +1,11 @@
 import { ReactNode } from "react"
 
+import type { MatomoEventOptions } from "@/lib/types"
+
 import InlineLink, { BaseLink } from "@/components/ui/Link"
 import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
 
 import { cn } from "@/lib/utils/cn"
-import { MatomoEventOptions } from "@/lib/utils/matomo"
 
 interface InlineLinkData {
   text: string

src/components/ui/Link.tsx

@@ -5,8 +5,10 @@ import { ExternalLink, Mail } from "lucide-react"
 import NextLink from "next/link"
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
 
+import { MatomoEventOptions } from "@/lib/types"
+
 import { cn } from "@/lib/utils/cn"
-import { type MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
+import { trackCustomEvent } from "@/lib/utils/matomo"
 import { getRelativePath } from "@/lib/utils/relativePath"
 import * as url from "@/lib/utils/url"