first

2026-04-10 15:31:59 +04:00
parent 87d2688eeb
commit ec0f991a30
55 changed files with 10218 additions and 0 deletions
@@ -0,0 +1,55 @@
+'use client';
+
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export function LanguageSwitcher() {
+  const { i18n } = useTranslation();
+
+  const toggleLanguage = useCallback(() => {
+    const newLang = i18n.language === 'en' ? 'ar' : 'en';
+    i18n.changeLanguage(newLang);
+    
+    // Update document direction for RTL support
+    document.documentElement.dir = newLang === 'ar' ? 'rtl' : 'ltr';
+    document.documentElement.lang = newLang;
+  }, [i18n]);
+
+  return (
+    <button
+      onClick={toggleLanguage}
+      style={{
+        padding: '0.5rem 1rem',
+        backgroundColor: 'rgba(0, 0, 0, 0.04)',
+        border: '1px solid rgba(0, 0, 0, 0.08)',
+        borderRadius: '0.5rem',
+        color: '#1a1a2e',
+        cursor: 'pointer',
+        fontSize: '0.875rem',
+        fontWeight: 500,
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem',
+        transition: 'all 0.2s ease',
+      }}
+      aria-label="Toggle language"
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <line x1="2" y1="12" x2="22" y2="12" />
+        <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+      </svg>
+      {i18n.language === 'en' ? 'العربية' : 'English'}
+    </button>
+  );
+}