From d7b5b81b5d6ec55d0847b5171c3800a8f7b5c001 Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Tue, 7 Oct 2025 17:25:43 -0700
Subject: feat: add i18n translation (initial JP and EN)

---
 site/src/components/TitleBar.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

(limited to 'site/src/components/TitleBar.tsx')

diff --git a/site/src/components/TitleBar.tsx b/site/src/components/TitleBar.tsx
index 2229a45..3822980 100644
--- a/site/src/components/TitleBar.tsx
+++ b/site/src/components/TitleBar.tsx
@@ -5,12 +5,15 @@ import {
   useNavigate,
   useLocation,
 } from "react-router-dom";
+import LanguageSwitcher from "./LanguageSwitcher";
+import { useTranslation } from "react-i18next";
 
 const TitleBar: React.FC = () => {
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
   const location = useLocation();
   const isMoe = searchParams.has("moe");
+  const { t } = useTranslation();
 
   const toggleTheme = () => {
     const params = new URLSearchParams(searchParams);
@@ -56,7 +59,7 @@ const TitleBar: React.FC = () => {
               onClick={toggleTheme}
               className={`text-sm ${isMoe ? "bg-pink-100 text-pink-800 hover:bg-pink-200 hover:text-pink-600" : "bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white"} font-medium px-3 py-1 rounded`}
             >
-              {isMoe ? "🌙 Dark" : "🌸 Light"}
+              {isMoe ? "🌙 "+t('dark_theme_text') : "🌸 "+t("light_theme_text")}
             </button>
             <img
               src="/rasis.webp"
@@ -81,14 +84,15 @@ const TitleBar: React.FC = () => {
               to={`/${isMoe ? "?moe" : ""}`}
               className={`${isMoe ? "text-pink-800 hover:text-pink-600" : "text-gray-300 hover:text-white"} font-medium text-sm sm:text-base`}
             >
-              Main News Feed
+              {t('news_feed')}
             </Link>
             <Link
               to={`/games${isMoe ? "?moe" : ""}`}
               className={`${isMoe ? "text-pink-800 hover:text-pink-600" : "text-gray-300 hover:text-white"} font-medium text-sm sm:text-base`}
             >
-              Game Selector
+              {t('game_selector')}
             </Link>
+            <LanguageSwitcher variant="compact" />
           </div>
         </div>
       </div>
-- 
cgit v1.2.3