Improve MineGeo interface and functionality

components/CatalogBrowser.tsx

@@ -1,8 +1,11 @@
 "use client";
+import { useI18n } from "@/components/I18nProvider";
+
 import { useState } from "react";
 import { Search } from "lucide-react";
 import { MapCard, type CardMap } from "./MapCard";
 export function CatalogBrowser({ maps }: { maps: CardMap[] }) {
+  const { t } = useI18n();
   const [query, setQuery] = useState(""),
     [source, setSource] = useState("all");
   const shown = maps.filter(
@@ -18,17 +21,17 @@ export function CatalogBrowser({ maps }: { maps: CardMap[] }) {
         <label className="search-field">
           <Search size={17} />
           <input
-            aria-label="Search worlds"
-            placeholder="Search worlds or servers…"
+            aria-label={t("Search worlds")}
+            placeholder={t("Search worlds or servers…")}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
           />
         </label>
-        <div className="tabs" aria-label="Capture source">
+        <div className="tabs" aria-label={t("Capture source")}>
           {[
-            ["all", "All worlds"],
-            ["plugin", "Server exports"],
-            ["fabric", "Player captures"],
+            ["all", t("All worlds")],
+            ["plugin", t("Server exports")],
+            ["fabric", t("Player captures")],
           ].map(([id, label]) => (
             <button
               key={id}
@@ -36,13 +39,13 @@ export function CatalogBrowser({ maps }: { maps: CardMap[] }) {
               aria-pressed={source === id}
               onClick={() => setSource(id)}
             >
-              {label}
+              {t(label)}
             </button>
           ))}
         </div>
       </div>
       <p className="muted">
-        {shown.length} {shown.length === 1 ? "world" : "worlds"} to explore
+        {t("Worlds to explore: {count}", { count: shown.length })}
       </p>
       <div className="cards-grid">
         {shown.map((m, i) => (
@@ -50,7 +53,7 @@ export function CatalogBrowser({ maps }: { maps: CardMap[] }) {
         ))}
       </div>
       {!shown.length && (
-        <p className="empty-state">No worlds match that search.</p>
+        <p className="empty-state">{t("No worlds match that search.")}</p>
       )}
     </>
   );