import { useLanguage } from '@site/src/contexts/LanguageContext';
import React from 'react';
import ReactDOM from 'react-dom';
const LanguageToggleComponent = () => {
const { currentLanguage, changeLanguage } = useLanguage();
const handleLanguageChange = (e) => {
changeLanguage(e.target.value);
};
return (
);
};
// Render the language toggle in the placeholder
if (typeof window !== 'undefined') {
// Wait for the DOM to be ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
const placeholder = document.getElementById('language-toggle-placeholder');
if (placeholder) {
// Wrap the component in the LanguageProvider context
const wrapper = document.createElement('div');
placeholder.appendChild(wrapper);
// Since we can't directly access the LanguageProvider context here,
// we'll render a simple implementation
ReactDOM.render(
React.createElement(() => {
const [currentLanguage, setCurrentLanguage] = React.useState('en');
React.useEffect(() => {
const savedLanguage = localStorage.getItem('preferredLanguage') || 'en';
setCurrentLanguage(savedLanguage);
}, []);
const handleLanguageChange = (newLanguage) => {
if (newLanguage !== currentLanguage) {
setCurrentLanguage(newLanguage);
localStorage.setItem('preferredLanguage', newLanguage);
// Dispatch a custom event that other components can listen to
window.dispatchEvent(new CustomEvent('languageChange', {
detail: { newLanguage }
}));
}
};
return (
);
}),
wrapper
);
}
});
} else {
// DOM is already ready
const placeholder = document.getElementById('language-toggle-placeholder');
if (placeholder) {
const wrapper = document.createElement('div');
placeholder.appendChild(wrapper);
ReactDOM.render(
React.createElement(() => {
const [currentLanguage, setCurrentLanguage] = React.useState('en');
React.useEffect(() => {
const savedLanguage = localStorage.getItem('preferredLanguage') || 'en';
setCurrentLanguage(savedLanguage);
}, []);
const handleLanguageChange = (newLanguage) => {
if (newLanguage !== currentLanguage) {
setCurrentLanguage(newLanguage);
localStorage.setItem('preferredLanguage', newLanguage);
// Dispatch a custom event that other components can listen to
window.dispatchEvent(new CustomEvent('languageChange', {
detail: { newLanguage }
}));
}
};
return (
);
}),
wrapper
);
}
}
}