Improve MineGeo interface and functionality

components/ContributionInstructions.tsx

@@ -1,3 +1,5 @@
+"use client";
+import { useI18n } from "@/components/I18nProvider";
 import Link from "next/link";
 export function ContributionInstructions({
   id,
@@ -10,57 +12,63 @@ export function ContributionInstructions({
   serverAddress: string | null;
   isOwner?: boolean;
 }) {
+  const { t } = useI18n();
   return (
     <div className="token-box">
-      <h3>Add panoramas to this map</h3>
+      <h3>{t("Add panoramas to this map")}</h3>
       {serverAddress ? (
         <div>
-          <p>Contribution server:</p>
+          <p>{t("Contribution server:")}</p>
           <code>{serverAddress}</code>
           <p>
-            Capture on this server. Uploads from a different address are
-            blocked.
+            {t(
+              "Capture on this server. Uploads from a different address are blocked.",
+            )}
           </p>
         </div>
       ) : (
         <p className="muted">
-          Server check is off. The owner has not set a server address; captures
-          from other servers can be submitted. Only submit panoramas from this
-          map’s world.
+          {t(
+            "Server check is off. The owner has not set a server address; captures from other servers can be submitted. Only submit panoramas from this map’s world.",
+          )}
         </p>
       )}
       <p>
-        Capture in the same Minecraft world, within X {bounds.minX} to{" "}
-        {bounds.maxX} and Z {bounds.minZ} to {bounds.maxZ}.{" "}
+        {t("Capture in the same Minecraft world, within X")} {bounds.minX}{" "}
+        {t("to")} {bounds.maxX} {t("and Z")} {bounds.minZ} {t("to")}{" "}
+        {bounds.maxZ}.{" "}
         {isOwner
-          ? "As the owner, you can fill the map’s 24 panorama slots."
-          : "Each guest contributor may add up to 12 panoramas in total."}{" "}
-        The map holds at most 24, including pending uploads and unselected
-        captures.
+          ? t("As the owner, you can fill the map’s 24 panorama slots.")
+          : t(
+              "Each guest contributor may add up to 12 panoramas in total.",
+            )}{" "}
+        {t(
+          "The map holds at most 24, including pending uploads and unselected captures.",
+        )}
       </p>
       <p>
-        In the Fabric mod, paste this map ID into “Add to map”. For the server
-        plugin, export the area and run:
+        {t(
+          "In the Fabric mod, paste this map ID into “Add to map”. For the server plugin, export the area and run:",
+        )}
       </p>
       <code className="command-line">/minegeo contribute {id}</code>
       {isOwner && (
         <p>
-          This command also adds your own panoramas. Open the resulting
-          contribution in your dashboard, submit it, then accept it in this
-          map’s submissions below. Finally, submit the map update for moderator
-          review.
+          {t(
+            "This command also adds your own panoramas. Open the resulting contribution in your dashboard, submit it, then accept it in this map’s submissions below. Finally, submit the map update for moderator review.",
+          )}
         </p>
       )}
       <p>
-        Map ID: <code>{id}</code>
+        {t("Map ID:")} <code>{id}</code>
       </p>
       <p>
-        Open your dashboard after processing, inspect your panoramas, and submit
-        them to the owner. The owner approves them first, then moderators review
-        the map update.
+        {t(
+          "Open your dashboard after processing, inspect your panoramas, and submit them to the owner. The owner approves them first, then moderators review the map update.",
+        )}
       </p>
       <Link className="button" href="/downloads">
-        Get the capture tools →
+        {t("Get the capture tools →")}
       </Link>
     </div>
   );