Add UI input & textarea

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

packages/i18n/TranslatorProvider.tsx

@@ -1,16 +1,16 @@
 import {
-    createContext,
-    PropsWithChildren,
-    useCallback,
-    useContext,
-    useEffect,
-    useState,
+  createContext,
+  type PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
 } from "react";
 
 const defaultValue = {
-    lang: "en" as "en" | "fr",
-    translations: {} as Record<string, string>,
-    translate: (s: string) => s,
+  lang: "en" as "en" | "fr",
+  translations: {} as Record<string, string>,
+  translate: (s: string) => s,
 };
 
 type Context = typeof defaultValue;
@@ -18,43 +18,40 @@ type Context = typeof defaultValue;
 const TranslatorContext = createContext(defaultValue);
 
 type Props = {
-    lang: "en" | "fr";
-    loader: (lang: string) => Promise<Record<string, string>>;
+  lang: "en" | "fr";
+  loader: (lang: string) => Promise<Record<string, string>>;
 };
 
 export function TranslatorProvider({
-    lang,
-    loader,
-    children,
+  lang,
+  loader,
+  children,
 }: PropsWithChildren<Props>) {
-    const [translations, setTranslations] = useState(
-        {} as Record<string, string>,
-    );
-    const translate = useCallback<Context["translate"]>(
-        (s) => {
-            return translations[s] ? translations[s] : s;
-        },
-        [translations],
-    );
+  const [translations, setTranslations] = useState(
+    {} as Record<string, string>
+  );
+  const translate = useCallback<Context["translate"]>(
+    (s) => {
+      return translations[s] ? translations[s] : s;
+    },
+    [translations]
+  );
 
-    useEffect(() => {
-        loader(lang).then(setTranslations);
-    }, [lang]);
+  useEffect(() => {
+    loader(lang).then(setTranslations);
+  }, [lang]);
 
-    return (
-        <TranslatorContext.Provider
-            value={{ lang, translations, translate }}
-        >
-            {children}
-        </TranslatorContext.Provider>
-    );
+  return (
+    <TranslatorContext.Provider value={{ lang, translations, translate }}>
+      {children}
+    </TranslatorContext.Provider>
+  );
 }
 
 export function useTranslate() {
-    const { translate, lang } =
-        useContext(TranslatorContext);
-    return {
-        lang,
-        __: translate,
-    };
+  const { translate, lang } = useContext(TranslatorContext);
+  return {
+    lang,
+    __: translate,
+  };
 }