feat: add i18n

components/Sidebar/Sidebar.jsx

@@ -1,19 +1,20 @@
+"use client";
+
 import { BsGearFill } from "react-icons/bs";
 import TftLogo from "../../public/images/tft-logo.svg";
 import ValorantLogo from "../../public/images/valorant-logo.svg";
 import LolLogo from "../../public/images/lol-logo.svg";
 import Logo from "../../public/images/icon.svg";
 import Link from "next/link";
+import { useTranslation } from "next-i18next";
 
 const SideBar = () => {
+  const { t } = useTranslation("sidebar");
+
   return (
-    <div className="fixed z-[30] bottom-0 sm:bottom-auto right-0 sm:right-auto sm:top-0 left-0 h-16 sm:h-screen w-full sm:w-16 flex flex-row sm:flex-col dark:bg-red-400 shadow-lg">
+    <div className="fixed z-[30] bottom-0 sm:bottom-auto right-0 sm:right-auto sm:top-0 left-0 h-16 sm:h-screen w-full sm:w-16 flex flex-row sm:flex-col bg-[#423b3b] shadow-lg">
       <div className="flex flex-row sm:flex-col justify-between sm:justify-start flex-1 px-4 sm:px-0">
-        <SideBarMainIcon
-          icon={<Logo size="28" />}
-          text="Target Kill"
-          href="/"
-        />
+        <SideBarMainIcon icon={<Logo size="28" />} text="TargetKill" href="/" />
         <Divider />
         <SideBarIcon
           icon={<LolLogo size="28" />}
@@ -32,7 +33,7 @@ const SideBar = () => {
         />
         <SideBarIcon
           icon={<BsGearFill size="22" />}
-          text="Settings"
+          text={t("settings")}
           href="/settings"
         />
       </div>
@@ -44,7 +45,7 @@ const SideBarIcon = ({ href, icon, text = "tooltip 💡" }) => (
   <Link href={href}>
     <div className="sidebar-icon group">
       {icon}
-      <span class="sidebar-tooltip group-hover:scale-100">{text}</span>
+      <span className="sidebar-tooltip group-hover:scale-100">{text}</span>
     </div>
   </Link>
 );
@@ -53,7 +54,7 @@ const SideBarMainIcon = ({ href, icon, text = "tooltip 💡" }) => (
   <Link href={href}>
     <div className="sidebar-icon-main group">
       {icon}
-      <span class="sidebar-tooltip group-hover:scale-100">{text}</span>
+      <span className="sidebar-tooltip group-hover:scale-100">{text}</span>
     </div>
   </Link>
 );

layout/generic-layout.jsx

@@ -1,12 +1,11 @@
-import Header from "@/components/Header/header";
 import Sidebar from "@/components/Sidebar/Sidebar";
 import React from "react";
 
 function GenericLayout({ children, className }) {
   return (
     <main className={`${className} flex`}>
       <Sidebar />
-      <div className="sm:pl-8 flex flex-1">{children}</div>
+      <div className="flex flex-1">{children}</div>
     </main>
   );
 }

next-i18next.config.js

@@ -0,0 +1,8 @@
+/** @type {import('next-i18next').UserConfig} */
+module.exports = {
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en", "tr"],
+  },
+  reloadOnPrerender: process.env.NODE_ENV === "development" ? true : false,
+};

next.config.js

@@ -1,3 +1,5 @@
+const { i18n } = require("./next-i18next.config");
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
@@ -9,6 +11,7 @@ const nextConfig = {
     });
     return config;
   },
+  i18n,
 };
 
 module.exports = nextConfig;

package.json

@@ -29,12 +29,15 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "framer-motion": "^10.16.3",
+    "i18next": "^23.5.1",
     "next": "13.4.19",
+    "next-i18next": "^14.0.3",
     "next-themes": "^0.2.1",
     "postcss": "8.4.28",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.45.4",
+    "react-i18next": "^13.2.2",
     "react-icons": "^4.10.1",
     "react-redux": "^8.1.2",
     "react-responsive": "^9.0.2",