Refactor client UI with shadcn heatmap layout

2025-10-10 10:04:04 +02:00
parent 9834438ff1
commit 8f4b954af8
20 changed files with 2133 additions and 739 deletions
@@ -0,0 +1,32 @@
+import type { MutableRefObject } from 'react'
+
+import { cn } from '@/lib/utils'
+
+interface MapViewportProps {
+  containerRef: MutableRefObject<HTMLDivElement | null>
+  isPosting: boolean
+  isLoading: boolean
+  confirmationHint?: string | null
+}
+
+export function MapViewport({ containerRef, isPosting, isLoading, confirmationHint }: MapViewportProps) {
+  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')} />
+      <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-24 bg-gradient-to-b from-background/70 to-transparent" />
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-24 bg-gradient-to-t from-background/70 to-transparent" />
+      {(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…'}
+          </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">
+          {confirmationHint}
+        </div>
+      )}
+    </div>
+  )
+}