index.tsx (1328B)
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 import { PurpleAccountPage } from '@/components/pages/purple-account'; 11 12 export default function HomePage() { 13 // Automatically detect the user's locale based on their browser settings 14 const [language, setLanguage] = useState("en"); 15 const [messages, setMessages] = useState(English); 16 17 useEffect(() => { 18 setLanguage(navigator.language); 19 }, []); 20 21 useEffect(() => { 22 switch (language) { 23 case "en": 24 setMessages(English); 25 break; 26 case "ja": 27 // TODO: Add Japanese translations and then switch to "Japanese" below 28 setMessages(English); 29 break; 30 default: 31 setMessages(English); 32 break; 33 } 34 }, [language]); 35 36 return (<> 37 <IntlProvider 38 locale={language} 39 messages={messages} 40 onError={() => null}> 41 <PurpleAccountPage /> 42 </IntlProvider> 43 </>) 44 } 45