Enable users to switch seamlessly between English and Arabic languages

Adds i18next, LanguageDetector, locales (en.json, ar.json), and LanguageSwitcher component for internationalization.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ff0be73b-afdd-4747-978b-bb8301fb0a82
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/9777c70b-fc38-4831-8d6b-78dfffe041b0/d552135c-0e60-4fc7-98a2-0e9cddf2b4b3.jpg

client/src/components/LanguageSwitcher.tsx

@@ -0,0 +1,50 @@
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { 
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Languages } from 'lucide-react';
+
+export function LanguageSwitcher() {
+  const { i18n } = useTranslation();
+
+  const languages = [
+    { code: 'en', name: 'English', flag: '🇺🇸' },
+    { code: 'ar', name: 'العربية', flag: '🇸🇦' }
+  ];
+
+  const changeLanguage = (langCode: string) => {
+    i18n.changeLanguage(langCode);
+    // Update document direction for Arabic
+    document.documentElement.dir = langCode === 'ar' ? 'rtl' : 'ltr';
+    document.documentElement.lang = langCode;
+  };
+
+  const currentLanguage = languages.find(lang => lang.code === i18n.language) || languages[0];
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm" className="gap-2">
+          <Languages className="h-4 w-4" />
+          <span className="hidden sm:inline">{currentLanguage.flag} {currentLanguage.name}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {languages.map((language) => (
+          <DropdownMenuItem
+            key={language.code}
+            onClick={() => changeLanguage(language.code)}
+            className={`gap-2 ${i18n.language === language.code ? 'bg-accent' : ''}`}
+          >
+            <span>{language.flag}</span>
+            <span>{language.name}</span>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}