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