Lang selector

src/intl.tsx

@@ -1,10 +1,9 @@
+import { DefaultLocale, useLang } from "hooks/lang";
 import { useEffect, useState, type ReactNode } from "react";
 import { IntlProvider as ReactIntlProvider } from "react-intl";
 
 import enMessages from "translations/en.json";
 
-const DefaultLocale = "en-US";
-
 async function importLang(code: string) {
   const src = await import(`translations/${code}.json`);
   const typed = src.default as Record<string, { defaultMessage: string }>;
@@ -12,6 +11,13 @@ async function importLang(code: string) {
   return Object.fromEntries(ent) as Record<string, string>;
 }
 
+export const AllLocales = [
+  "en",
+  "de",
+  "es",
+  "th"
+]
+
 const getMessages = (locale: string) => {
   const truncatedLocale = locale.toLowerCase().split(/[_-]+/)[0];
 
@@ -36,7 +42,7 @@ const getMessages = (locale: string) => {
 };
 
 export const IntlProvider = ({ children }: { children: ReactNode }) => {
-  const locale = getLocale();
+  const { lang: locale } = useLang();
   const [messages, setMessages] = useState<Record<string, string>>(enMessages);
 
   useEffect(() => {
@@ -49,7 +55,3 @@ export const IntlProvider = ({ children }: { children: ReactNode }) => {
     </ReactIntlProvider>
   );
 };
-
-export const getLocale = () => {
-  return (navigator.languages && navigator.languages[0]) ?? navigator.language ?? DefaultLocale;
-};