Migrate from Vite to Next.js 15 with SSR

- Replace Vite + React Router with Next.js 15 App Router - Implement i18n with next-intl (URL-based: /de, /en, /sr) - Add SSR/SSG for all pages (48 static pages generated) - Setup Supabase SSR client for auth - Migrate all pages: Home, About, Portfolio, Blog, Contact, Login, Dashboard, Imprint, Privacy, Terms - Add Docker support with standalone output - Replace i18next with next-intl JSON translations - Use next/image for optimized images Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-17 01:00:33 +01:00
parent a66f51b9a2
commit b1ec7b4d61
281 changed files with 8024 additions and 8901 deletions
@@ -0,0 +1,98 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Globe } from 'lucide-react';
+
+const LanguageSwitcher: React.FC = () => {
+  const { i18n } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const languages = [
+    { code: 'en', name: 'English' },
+    { code: 'de', name: 'Deutsch' },
+    { code: 'sr', name: 'Srpski' },
+  ];
+
+  const currentLanguage = languages.find(lang => lang.code === i18n.language)?.name || 'Language';
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      setIsOpen(false);
+    }
+  };
+
+  const handleClickOutside = (e: MouseEvent) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      window.removeEventListener('resize', checkMobile);
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+      <div className="relative inline-block" ref={dropdownRef}>
+        <button
+            className="flex items-center space-x-2 text-zinc-400 hover:text-white
+                 px-4 py-2 rounded-full transition-all duration-200
+                 hover:bg-zinc-800/50 border border-transparent hover:border-zinc-800
+                 hover:scale-105 active:scale-95"
+            onClick={() => setIsOpen(!isOpen)}
+            aria-expanded={isOpen}
+            aria-haspopup="listbox"
+            aria-label="Select language"
+        >
+          <Globe className="h-5 w-5" aria-hidden="true" />
+          <span className="text-sm">{currentLanguage}</span>
+        </button>
+
+        {/* Dropdown with CSS transitions */}
+        <div
+            className={`absolute ${isMobile ? 'bottom-full mb-2' : 'top-full mt-2'} right-0 w-48 rounded-lg overflow-hidden
+                       border border-zinc-800 bg-zinc-900/95 backdrop-blur-sm shadow-lg
+                       transition-all duration-200 origin-top
+                       ${isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none'}`}
+            role="listbox"
+            aria-label="Languages"
+            onKeyDown={handleKeyDown}
+        >
+          <div className="py-1">
+            {languages.map((lang) => (
+                <button
+                    key={lang.code}
+                    className={`w-full text-left px-4 py-2 text-sm transition-colors duration-200
+                      hover:bg-zinc-800/50
+                      ${i18n.language === lang.code
+                        ? 'bg-zinc-800 text-white'
+                        : 'text-zinc-400 hover:text-white'
+                    }`}
+                    onClick={() => {
+                      i18n.changeLanguage(lang.code);
+                      setIsOpen(false);
+                    }}
+                    role="option"
+                    aria-selected={i18n.language === lang.code}
+                >
+                  {lang.name}
+                </button>
+            ))}
+          </div>
+        </div>
+      </div>
+  );
+};
+
+export default LanguageSwitcher;