jalil.arfaoui.net/src/components/LanguageSwitcher.astro

---
// Mapping des URLs entre langues
const translations: Record<string, Record<string, string>> = {
  '/a-propos': {
    fr: '/a-propos',
    en: '/en/about',
    ar: '/ar/نبذة-عني'
  },
  '/en/about': {
    fr: '/a-propos',
    en: '/en/about',
    ar: '/ar/نبذة-عني'
  },
  '/ar/نبذة-عني': {
    fr: '/a-propos',
    en: '/en/about',
    ar: '/ar/نبذة-عني'
  },
  // Page d'accueil
  '/': {
    fr: '/',
    en: '/en',
    ar: '/ar'
  },
  '/en': {
    fr: '/',
    en: '/en',
    ar: '/ar'
  },
  '/ar': {
    fr: '/',
    en: '/en',
    ar: '/ar'
  }
};

// Détection de la langue courante
const pathname = Astro.url.pathname.replace(/\/$/, '') || '/';
const currentLang = pathname.startsWith('/en') ? 'en' : pathname.startsWith('/ar') ? 'ar' : 'fr';

// Récupération des liens traduits ou fallback vers les pages d'accueil
const links = translations[pathname] || {
  fr: '/',
  en: '/en',
  ar: '/ar'
};

const languages = [
  { code: 'fr', label: 'FR', name: 'Français' },
  { code: 'en', label: 'EN', name: 'English' },
  { code: 'ar', label: 'ع', name: 'العربية' }
];
---

<div class="language-switcher flex items-center gap-1 text-sm">
  {languages.map((lang, index) => (
    <>
      {index > 0 && <span class="text-gray-400 dark:text-neutral-600">·</span>}
      {lang.code === currentLang ? (
        <span class="font-semibold text-gray-800 dark:text-neutral-200" title={lang.name}>
          {lang.label}
        </span>
      ) : (
        <a
          href={links[lang.code]}
          class="text-gray-500 dark:text-neutral-400 hover:text-gray-800 dark:hover:text-neutral-200 transition-colors"
          title={lang.name}
          hreflang={lang.code}
        >
          {lang.label}
        </a>
      )}
    </>
  ))}
</div>