📄 Huge intl feature

components/blog/navbar.tsx

@@ -1,10 +1,13 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import Link from 'next/link'
+import { useTranslations } from 'next-intl'
+import { Link } from '@/i18n/navigation'
 import { ThemeToggle } from '@/components/theme-toggle'
+import LanguageSwitcher from '@/components/layout/LanguageSwitcher'
 
 export function Navbar() {
+  const t = useTranslations('Navigation')
   const [isVisible, setIsVisible] = useState(true)
   const [lastScrollY, setLastScrollY] = useState(0)
 
@@ -39,10 +42,10 @@ export function Navbar() {
               className="font-mono text-sm uppercase tracking-wider transition-colors cursor-pointer"
               style={{ color: 'var(--neon-cyan)' }}
             >
-              < HOME
+              < {t('home')}
             </Link>
             <span className="font-mono text-sm text-zinc-100 dark:text-zinc-300 uppercase tracking-wider">
-              // <span style={{ color: 'var(--neon-pink)' }}>BLOG</span> ARCHIVE
+              // <span style={{ color: 'var(--neon-pink)' }}>{t('blog')}</span> ARCHIVE
             </span>
           </div>
           <div className="flex items-center gap-6">
@@ -50,15 +53,16 @@ export function Navbar() {
               href="/about"
               className="font-mono text-sm text-zinc-400 dark:text-zinc-500 uppercase tracking-wider hover:text-cyan-400 dark:hover:text-cyan-300 transition-colors cursor-pointer"
             >
-              [ABOUT]
+              [{t('about')}]
             </Link>
             <Link
               href="/blog"
               className="font-mono text-sm text-zinc-400 dark:text-zinc-500 uppercase tracking-wider hover:text-cyan-400 dark:hover:text-cyan-300 transition-colors cursor-pointer"
             >
-              [BLOG]
+              [{t('blog')}]
             </Link>
-             <ThemeToggle />
+            <ThemeToggle />
+            <LanguageSwitcher />
           </div>
         </div>
       </div>