Improve MineGeo interface and functionality

components/MapCard.tsx

@@ -1,3 +1,5 @@
+"use client";
+import { useI18n } from "@/components/I18nProvider";
 import Image from "next/image";
 import Link from "next/link";
 import { ArrowUpRight, MapPin } from "lucide-react";
@@ -21,13 +23,14 @@ export function MapCard({
   index?: number;
   minecraftPaper?: boolean;
 }) {
+  const { t } = useI18n();
   return (
     <Link className="map-card" href={`/servers/${map.id}`}>
       <div className={`card-image${minecraftPaper ? " minecraft-paper" : ""}`}>
         <div className="card-map-content">
           <Image
             src={map.image || "/images/example-map.webp"}
-            alt={`${map.name} terrain`}
+            alt={t("Terrain of {name}", { name: map.name })}
             fill
             loading={index < 3 ? "eager" : "lazy"}
             unoptimized
@@ -35,26 +38,30 @@ export function MapCard({
           />
         </div>
         <span className="card-type">
-          {map.source === "plugin" ? "SERVER EXPORT" : "PLAYER CAPTURE"}
+          {map.source === "plugin" ? t("SERVER EXPORT") : t("PLAYER CAPTURE")}
         </span>
         <span className="card-number">0{index + 1}</span>
       </div>
       <div className="card-body">
-        <span className="eyebrow">{map.server?.name || "Overworld"}</span>
+        <span className="eyebrow">{map.server?.name || t("Overworld")}</span>
         <h3>
           {map.name}
           <ArrowUpRight size={20} />
         </h3>
         <p>{map.description}</p>
-        {map.credit && <p className="map-credit">By {map.credit}</p>}
+        {map.credit && (
+          <p className="map-credit">
+            {t("By")} {map.credit}
+          </p>
+        )}
         <div className="card-meta">
           <span>
             <MapPin size={13} />
-            {map.panorama_count} locations
+            {map.panorama_count} {t("locations")}
           </span>
           <span>
             {map.bounds.maxX - map.bounds.minX} ×{" "}
-            {map.bounds.maxZ - map.bounds.minZ} blocks
+            {map.bounds.maxZ - map.bounds.minZ} {t("blocks")}
           </span>
         </div>
       </div>