Improve MineGeo interface and functionality

components/Shell.tsx

@@ -1,10 +1,13 @@
+import { getI18n } from "@/lib/i18n";
 import "server-only";
 import Link from "next/link";
-import { Compass, ArrowUpRight, Globe2 } from "lucide-react";
+import { Compass, ArrowUpRight } from "lucide-react";
+import { LanguageSwitcher } from "./LanguageSwitcher";
 import { user } from "@/lib/supabase";
 import { Brand } from "./Brand";
 import { SiteNav } from "./SiteNav";
 export async function Header() {
+  const { t } = await getI18n();
   const account = await user();
   return (
     <header className="site-header">
@@ -15,48 +18,49 @@ export async function Header() {
           href={account ? "/dashboard" : "/log-in"}
           className="header-account"
         >
-          {account ? "My account" : "Log in"} <ArrowUpRight size={15} />
+          {account ? t("My account") : t("Log in")} <ArrowUpRight size={15} />
         </Link>
       </div>
     </header>
   );
 }
-export function Footer() {
+export async function Footer() {
+  const { t } = await getI18n();
   return (
     <footer className="site-footer">
       <div>
         <Brand />
-        <p>A familiar world. A whole new perspective.</p>
+        <p>{t("A familiar world. A whole new perspective.")}</p>
       </div>
       <div>
-        <span>
-          <Globe2 size={14} /> English
-        </span>
-        <Link href="/downloads">Tools & downloads</Link>
-        <Link href="/leaderboard">Leaderboard</Link>
-        <Link href="/moderation">Moderation</Link>
+        <LanguageSwitcher />
+        <Link href="/downloads">{t("Tools & downloads")}</Link>
+        <Link href="/leaderboard">{t("Leaderboard")}</Link>
+        <Link href="/moderation">{t("Moderation")}</Link>
       </div>
       <p className="disclaimer">
-        An independent community project. Not affiliated with Mojang or
-        Microsoft.
+        {t(
+          "An independent community project. Not affiliated with Mojang or Microsoft.",
+        )}
       </p>
     </footer>
   );
 }
-export function EmptyState({
+export async function EmptyState({
   title,
   children,
 }: {
   title: string;
   children: React.ReactNode;
 }) {
+  const { t } = await getI18n();
   return (
     <div className="empty-state">
       <Compass size={36} />
-      <h3>{title}</h3>
+      <h3>{t(title)}</h3>
       <p>{children}</p>
       <Link className="button primary" href="/downloads">
-        Create the first map <ArrowUpRight size={16} />
+        {t("Create the first map")} <ArrowUpRight size={16} />
       </Link>
     </div>
   );