init

components/globe/globe-controls.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { RotateCw, ZoomIn, ZoomOut } from "lucide-react";
+
+interface GlobeControlsProps {
+  onResetView: () => void;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+}
+
+export function GlobeControls({ onResetView, onZoomIn, onZoomOut }: GlobeControlsProps) {
+  return (
+    <div className="absolute bottom-4 right-4 z-10 flex flex-col gap-2">
+      <button
+        onClick={onZoomIn}
+        className="flex h-8 w-8 items-center justify-center rounded-lg border border-white/10 bg-[var(--bg-card)]/80 text-[var(--text-secondary)] backdrop-blur-sm transition-all hover:border-[var(--accent-cyan)]/30 hover:text-[var(--accent-cyan)]"
+        aria-label="Zoom in"
+      >
+        <ZoomIn className="h-4 w-4" />
+      </button>
+      <button
+        onClick={onZoomOut}
+        className="flex h-8 w-8 items-center justify-center rounded-lg border border-white/10 bg-[var(--bg-card)]/80 text-[var(--text-secondary)] backdrop-blur-sm transition-all hover:border-[var(--accent-cyan)]/30 hover:text-[var(--accent-cyan)]"
+        aria-label="Zoom out"
+      >
+        <ZoomOut className="h-4 w-4" />
+      </button>
+      <button
+        onClick={onResetView}
+        className="flex h-8 w-8 items-center justify-center rounded-lg border border-white/10 bg-[var(--bg-card)]/80 text-[var(--text-secondary)] backdrop-blur-sm transition-all hover:border-[var(--accent-cyan)]/30 hover:text-[var(--accent-cyan)]"
+        aria-label="Reset view"
+      >
+        <RotateCw className="h-4 w-4" />
+      </button>
+    </div>
+  );
+}