Добавлен новый компонент TabsNav для управления навигацией по вкладкам в страницах аккаунта и статистики. Обновлены соответствующие страницы для использования нового компонента, что улучшает структуру кода и упрощает управление вкладками. Также внесены изменения в стили для улучшения визуального восприятия.

src/components/Navigation.tsx

@@ -5,6 +5,8 @@ import styles from "../styles/navigation.module.css";
 import Cookies from "js-cookie";
 import { useEffect, useState } from "react";
 import { useUser } from "./UserContext";
+import TabsNav from "./TabsNav";
+import { useRouter } from "next/navigation";
 
 interface NavItem {
   id: string;
@@ -22,6 +24,7 @@ const Navigation: React.FC = () => {
   const pathname = usePathname();
   const [login, setLogin] = useState<string>("");
   const { firstName, surname } = useUser();
+  const router = useRouter();
 
   useEffect(() => {
     if (typeof document !== "undefined") {
@@ -30,25 +33,21 @@ const Navigation: React.FC = () => {
     }
   }, []);
 
+  const handleNavigationChange = (tabId: string) => {
+    if (tabId === "home") {
+      router.push("/");
+    } else if (tabId === "stat") {
+      router.push("/stat");
+    } else if (tabId === "billing") {
+      router.push("/billing");
+    }
+  };
+
   if (pathname === "/auth") return null;
   return (
     <nav className={styles.nav}>
       <div className={styles.logo}>RE:Premium Partner</div>
-      <div className={styles.links}>
-        {navItems.map((item) => (
-          <Link
-            key={item.id}
-            href={item.href}
-            className={
-              pathname === item.href
-                ? styles.active
-                : styles.link
-            }
-          >
-            {item.label}
-          </Link>
-        ))}
-      </div>
+      <TabsNav activeTab={pathname} setActiveTab={handleNavigationChange} tabs={navItems} />
       <div className={styles.profile}>
         <Link href="/account" style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}>
           <div className={styles.avatar}>