lang

src/components/TabNavigation.tsx

@@ -5,13 +5,15 @@ import { useEffect, useState } from "react";
 import BoldIcon from "@/components/ui/BoldIcon";
 import { cn } from "@/lib/utils";
 import { PAGE_SHELL_CLASS } from "@/constants/pageLayout";
+import { readLocalStorage } from "@/lib/safeStorage";
+import { useTranslation } from "react-i18next";
 
-const tabs = [
-  { href: "/", icon: "home-2", label: "خانه" },
-  { href: "/academy", icon: "teacher", label: "آموزشگاه" },
-  { href: "/projects", icon: "briefcase", label: "پروژه‌ها" },
-  { href: "/billboards", icon: "flash-circle", label: "بیلبورد" },
-  { href: "/settings", icon: "setting", label: "تنظیمات" },
+const TAB_KEYS = [
+  { href: "/", icon: "home-2", labelKey: "tabs.home" },
+  { href: "/academy", icon: "teacher", labelKey: "tabs.academy" },
+  { href: "/projects", icon: "briefcase", labelKey: "tabs.projects" },
+  { href: "/billboards", icon: "flash-circle", labelKey: "tabs.billboards" },
+  { href: "/settings", icon: "setting", labelKey: "tabs.settings" },
 ] as const;
 
 type TabNavigationProps = {
@@ -19,6 +21,7 @@ type TabNavigationProps = {
 };
 
 export default function TabNavigation({ currentPage }: TabNavigationProps) {
+  const { t } = useTranslation("common");
   const [mounted, setMounted] = useState(false);
   const [isDark, setIsDark] = useState(false);
 
@@ -29,7 +32,7 @@ export default function TabNavigation({ currentPage }: TabNavigationProps) {
   useEffect(() => {
     if (typeof window === "undefined") return;
     const checkTheme = () => {
-      const theme = localStorage.getItem("theme");
+      const theme = readLocalStorage("theme");
       const isDarkMode =
         theme === "dark" ||
         (theme === "system" &&
@@ -51,7 +54,7 @@ export default function TabNavigation({ currentPage }: TabNavigationProps) {
       )}
     >
       <div className="glass-panel gentle-transition flex justify-evenly rounded-full border border-[#C3C3C3]/60 p-2.5 shadow-lg dark:border-white/10">
-        {tabs.map((tab) => {
+        {TAB_KEYS.map((tab) => {
           const isActive =
             currentPage === tab.href ||
             (tab.href === "/settings" && currentPage.startsWith("/settings")) ||
@@ -74,17 +77,17 @@ export default function TabNavigation({ currentPage }: TabNavigationProps) {
                   isActive
                     ? "text-[#ff107d]"
                     : isDark
-                      ? "text-zinc-400"
+                      ? "text-white"
                       : "text-zinc-600"
                 )}
               />
               <span
                 className={cn(
                   "text-[10px] font-semibold gentle-transition",
-                  isActive ? "text-pink-500" : isDark ? "text-zinc-300" : "text-zinc-600"
+                  isActive ? "text-pink-500" : isDark ? "text-neutral-100" : "text-zinc-600"
                 )}
               >
-                {tab.label}
+                {t(tab.labelKey)}
               </span>
             </Link>
           );