initial migration

components/LocaleSwitcher.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { getLocaleFromPath, getLocalizedPath, t, type Locale } from '@/lib/i18n';
+
+export function LocaleSwitcher() {
+  const pathname = usePathname();
+  const currentLocale = getLocaleFromPath(pathname);
+
+  const locales: Locale[] = ['en', 'de'];
+  
+  return (
+    <div className="inline-flex items-center gap-2 bg-white rounded-lg border border-gray-200 p-1 shadow-sm">
+      {locales.map((locale) => {
+        const isActive = currentLocale === locale;
+        const label = locale === 'en' ? 'English' : 'Deutsch';
+        const flag = locale === 'en' ? '🇺🇸' : '🇩🇪';
+        
+        // Get the current path without locale
+        const currentPath = pathname.replace(/^\/(de|en)/, '') || '/';
+        const href = getLocalizedPath(currentPath, locale);
+        
+        return (
+          <Link
+            key={locale}
+            href={href}
+            className={`px-4 py-2 text-sm font-medium rounded-md transition-all ${
+              isActive
+                ? 'bg-blue-600 text-white shadow-sm'
+                : 'text-gray-700 hover:bg-gray-50 hover:text-gray-900'
+            }`}
+            aria-label={`Switch to ${label}`}
+            locale={locale}
+          >
+            <span className="inline-flex items-center gap-2">
+              <span className="text-base">{flag}</span>
+              <span>{label}</span>
+            </span>
+          </Link>
+        );
+      })}
+    </div>
+  );
+}