Updated language selector

src/components/LanguageSelectorReact.tsx

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import type { ComponentProps } from 'react';
+import { Icon as IconComponent } from 'astro-icon/components';
+
+// Create a wrapper component for Icon with proper TypeScript types
+const Icon = ({ className, ...props }: ComponentProps<typeof IconComponent> & { className?: string }) => {
+  return <IconComponent {...props} class={className} />;
+};
+
+interface Language {
+  code: string;
+  name: string;
+  flag: string;
+}
+
+const languages: Language[] = [
+  { code: 'en', name: 'English', flag: 'gb' },
+  { code: 'nl', name: 'Dutch', flag: 'nl' },
+  { code: 'de', name: 'German', flag: 'de' },
+];
+
+interface LanguageSelectorProps {
+  defaultLang: string;
+}
+
+export default function LanguageSelectorComponent({ defaultLang }: LanguageSelectorProps) {
+  const [currentLang] = useState<string>(defaultLang);
+
+  const handleLanguageSelect = (code: string) => {
+    if (code !== currentLang) {
+      window.location.href = `/${code}`;
+    }
+  };
+
+  return (
+    <div className="flex items-center space-x-4">
+      {languages.map((language) => (
+        <button
+          key={language.code}
+          onClick={() => handleLanguageSelect(language.code)}
+          className={`
+            inline-flex items-center px-3 py-2 text-sm font-medium rounded-md
+            transition-colors duration-200 hover:bg-gray-100
+            ${language.code === currentLang 
+              ? 'text-blue-600 bg-blue-50' 
+              : 'text-gray-600 hover:text-gray-900'
+            }
+          `}
+          aria-current={language.code === currentLang ? 'page' : undefined}
+        >
+          <Icon 
+            name={`circle-flags:${language.flag}`} 
+            className="w-5 h-5 mr-2" 
+            aria-hidden="true" 
+          />
+          <span>{language.name}</span>
+        </button>
+      ))}
+    </div>
+  );
+}