index.tsx (1035B)
1 import { IntlProvider, useIntl } from 'react-intl' 2 import English from "@/../content/compiled-locales/en.json"; 3 import { useEffect } from 'react'; 4 import { useState } from 'react'; 5 import { PurpleWelcomePage } from '@/components/pages/purple-welcome'; 6 7 export default function HomePage() { 8 // Automatically detect the user's locale based on their browser settings 9 const [language, setLanguage] = useState("en"); 10 const [messages, setMessages] = useState(English); 11 12 useEffect(() => { 13 setLanguage(navigator.language); 14 }, []); 15 16 useEffect(() => { 17 switch (language) { 18 case "en": 19 setMessages(English); 20 break; 21 case "ja": 22 // TODO: Add Japanese translations and then switch to "Japanese" below 23 setMessages(English); 24 break; 25 default: 26 setMessages(English); 27 break; 28 } 29 }, [language]); 30 31 return (<> 32 <IntlProvider 33 locale={language} 34 messages={messages} 35 onError={() => null}> 36 <PurpleWelcomePage/> 37 </IntlProvider> 38 </>) 39 }