Improve MineGeo interface and functionality

components/PanoramaPreview.tsx

@@ -1,4 +1,6 @@
 "use client";
+import { useI18n } from "@/components/I18nProvider";
+
 import { useEffect, useRef, useState } from "react";
 import { Panorama } from "./Panorama";
 import { api } from "./StartGame";
@@ -20,6 +22,7 @@ export function PanoramaPreview({
   initialId?: string;
   onClose: () => void;
 }) {
+  const { t } = useI18n();
   const dialog = useRef<HTMLDialogElement>(null);
   const closeButton = useRef<HTMLButtonElement>(null);
   const [expanded, setExpanded] = useState(false);
@@ -105,13 +108,15 @@ export function PanoramaPreview({
     >
       <header className="preview-header">
         <div>
-          <span className="eyebrow">360° PANORAMA</span>
-          <h2 id="panorama-preview-title">A closer look.</h2>
+          <span className="eyebrow">{t("360° PANORAMA")}</span>
+          <h2 id="panorama-preview-title">{t("A closer look.")}</h2>
         </div>
         <div className="preview-header-actions">
           <button
             className="icon-button"
-            aria-label={expanded ? "Restore preview size" : "Expand preview"}
+            aria-label={
+              expanded ? t("Restore preview size") : t("Expand preview")
+            }
             onClick={() => setExpanded(!expanded)}
           >
             {expanded ? <Minimize size={19} /> : <Expand size={19} />}
@@ -119,7 +124,7 @@ export function PanoramaPreview({
           <button
             ref={closeButton}
             className="icon-button"
-            aria-label="Close preview"
+            aria-label={t("Close preview")}
             onClick={onClose}
           >
             <X size={21} />
@@ -128,9 +133,9 @@ export function PanoramaPreview({
       </header>
       <div className="preview-toolbar">
         <label className="preview-location">
-          <span>Location</span>
+          <span>{t("Location")}</span>
           <select
-            aria-label="Preview location"
+            aria-label={t("Preview location")}
             value={selected}
             onChange={(e) => setSelected(e.target.value)}
           >
@@ -147,7 +152,7 @@ export function PanoramaPreview({
         <div className="preview-navigation">
           <button
             className="icon-button"
-            aria-label="Previous panorama"
+            aria-label={t("Previous panorama")}
             disabled={index <= 0}
             onClick={() => setSelected(locations[index - 1])}
           >
@@ -155,7 +160,7 @@ export function PanoramaPreview({
           </button>
           <button
             className="icon-button"
-            aria-label="Next panorama"
+            aria-label={t("Next panorama")}
             disabled={index < 0 || index >= locations.length - 1}
             onClick={() => setSelected(locations[index + 1])}
           >
@@ -174,12 +179,12 @@ export function PanoramaPreview({
         )}
         {error ? (
           <p role="alert" className="preview-status">
-            {error}
+            {t(error)}
           </p>
         ) : (
           !ready && (
             <p role="status" className="preview-status">
-              Loading panorama…
+              {t("Loading panorama…")}
             </p>
           )
         )}
@@ -187,9 +192,9 @@ export function PanoramaPreview({
       <footer className="preview-footer">
         <span>
           <Move size={16} />
-          Drag to look around · Scroll to zoom
+          {t("Drag to look around · Scroll to zoom")}
         </span>
-        <span>Check for blocked views and missing terrain.</span>
+        <span>{t("Check for blocked views and missing terrain.")}</span>
       </footer>
     </dialog>
   );