root
58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { PUBLIC_SITE_LANGUAGE_COOKIE, type PublicSiteLanguage } from '@/lib/i18n'
|
|
|
|
const labels: Record<PublicSiteLanguage, string> = {
|
|
en: 'Language',
|
|
fr: 'Langue',
|
|
ar: 'اللغة',
|
|
}
|
|
|
|
export default function PublicLanguageSwitcher({
|
|
currentLanguage,
|
|
}: {
|
|
currentLanguage: PublicSiteLanguage
|
|
}) {
|
|
const [language, setLanguage] = useState(currentLanguage)
|
|
|
|
useEffect(() => {
|
|
setLanguage(currentLanguage)
|
|
}, [currentLanguage])
|
|
|
|
useEffect(() => {
|
|
document.documentElement.lang = language
|
|
document.documentElement.dir = language === 'ar' ? 'rtl' : 'ltr'
|
|
window.localStorage.setItem('public-site-language', language)
|
|
}, [language])
|
|
|
|
function handleChange(nextLanguage: PublicSiteLanguage) {
|
|
setLanguage(nextLanguage)
|
|
document.cookie = `${PUBLIC_SITE_LANGUAGE_COOKIE}=${nextLanguage}; path=/; max-age=31536000; samesite=lax`
|
|
window.location.reload()
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-1 rounded-full border border-slate-200 bg-white px-2 py-1 shadow-sm">
|
|
<span className="px-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">
|
|
{labels[language]}
|
|
</span>
|
|
{(['en', 'fr', 'ar'] as PublicSiteLanguage[]).map((value) => {
|
|
const active = value === language
|
|
return (
|
|
<button
|
|
key={value}
|
|
type="button"
|
|
onClick={() => handleChange(value)}
|
|
className={`rounded-full px-3 py-1.5 text-xs font-semibold transition ${
|
|
active ? 'bg-slate-900 text-white' : 'text-slate-600 hover:bg-slate-100'
|
|
}`}
|
|
>
|
|
{value.toUpperCase()}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|