Add bilingual i18n UI and lighten component shadows

2025-10-10 10:30:28 +02:00
parent 8f4b954af8
commit 0422becdd0
20 changed files with 622 additions and 141 deletions
@@ -1,4 +1,5 @@
 import type { MutableRefObject } from 'react'
+import { useTranslation } from 'react-i18next'

 import { cn } from '@/lib/utils'

@@ -10,6 +11,8 @@ interface MapViewportProps {
 }

 export function MapViewport({ containerRef, isPosting, isLoading, confirmationHint }: MapViewportProps) {
+  const { t } = useTranslation()
+
  return (
    <div className="relative min-h-[360px] flex-1 overflow-hidden rounded-3xl border border-border/50 bg-muted/40 shadow-inner">
      <div ref={containerRef} className={cn('absolute inset-0 z-0', 'leaflet-wrapper')} />
@@ -18,12 +21,12 @@ export function MapViewport({ containerRef, isPosting, isLoading, confirmationHi
      {(isPosting || isLoading) && (
        <div className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center">
          <span className="rounded-full border border-border/60 bg-background/80 px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground backdrop-blur">
-            {isPosting ? 'Sending your signal…' : 'Syncing map…'}
+            {isPosting ? t('map.posting') : t('map.loading')}
          </span>
        </div>
      )}
      {confirmationHint && (
-        <div className="pointer-events-none absolute bottom-6 left-1/2 z-20 w-[90%] max-w-sm -translate-x-1/2 rounded-full border border-border/70 bg-background/90 px-4 py-2 text-xs text-muted-foreground shadow">
+        <div className="pointer-events-none absolute bottom-6 left-1/2 z-20 w-[90%] max-w-sm -translate-x-1/2 rounded-full border border-border/70 bg-background/90 px-4 py-2 text-xs text-muted-foreground shadow-sm">
          {confirmationHint}
        </div>
      )}