feat(web): i18n (#12471)

packages/console/app/src/component/footer.tsx

@@ -2,12 +2,16 @@ import { createAsync } from "@solidjs/router"
 import { createMemo } from "solid-js"
 import { github } from "~/lib/github"
 import { config } from "~/config"
+import { useLanguage } from "~/context/language"
+import { useI18n } from "~/context/i18n"
 
 export function Footer() {
+  const language = useLanguage()
+  const i18n = useI18n()
   const githubData = createAsync(() => github())
   const starCount = createMemo(() =>
     githubData()?.stars
-      ? new Intl.NumberFormat("en-US", {
+      ? new Intl.NumberFormat(language.tag(language.locale()), {
           notation: "compact",
           compactDisplay: "short",
         }).format(githubData()!.stars!)
@@ -18,20 +22,20 @@ export function Footer() {
     <footer data-component="footer">
       <div data-slot="cell">
         <a href={config.github.repoUrl} target="_blank">
-          GitHub <span>[{starCount()}]</span>
+          {i18n.t("footer.github")} <span>[{starCount()}]</span>
         </a>
       </div>
       <div data-slot="cell">
-        <a href="/docs">Docs</a>
+        <a href="/docs">{i18n.t("footer.docs")}</a>
       </div>
       <div data-slot="cell">
-        <a href="/changelog">Changelog</a>
+        <a href="/changelog">{i18n.t("footer.changelog")}</a>
       </div>
       <div data-slot="cell">
-        <a href="/discord">Discord</a>
+        <a href="/discord">{i18n.t("footer.discord")}</a>
       </div>
       <div data-slot="cell">
-        <a href={config.social.twitter}>X</a>
+        <a href={config.social.twitter}>{i18n.t("footer.x")}</a>
       </div>
     </footer>
   )