Fixed and changes

components/widgets/GlobeCard.tsx

@@ -1,11 +1,31 @@
 'use client';
 
 import createGlobe from 'cobe';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Globe } from 'lucide-react';
 
 export function GlobeCard() {
     const canvasRef = useRef<HTMLCanvasElement>(null);
+    const [visitorStats, setVisitorStats] = useState({ total: 0, active24h: 0, locations: [] });
+
+    useEffect(() => {
+        async function fetchVisitors() {
+            try {
+                const res = await fetch('/api/visitors');
+                const data = await res.json();
+                setVisitorStats({
+                    total: data.totalVisitors || 0,
+                    active24h: data.active24h || 0,
+                    locations: data.locations || []
+                });
+            } catch (e) {
+                console.error('Failed to load visitors', e);
+            }
+        }
+        fetchVisitors();
+        const interval = setInterval(fetchVisitors, 30000); // 30s poll
+        return () => clearInterval(interval);
+    }, []);
 
     useEffect(() => {
         let phi = 0;
@@ -25,17 +45,8 @@ export function GlobeCard() {
             baseColor: [0.3, 0.3, 0.3],
             markerColor: [0.1, 0.8, 1],
             glowColor: [0.1, 0.1, 0.2],
-            markers: [
-                // Mock data points
-                { location: [40.7128, -74.0060], size: 0.05 }, // NY
-                { location: [51.5074, -0.1278], size: 0.05 }, // London
-                { location: [35.6762, 139.6503], size: 0.05 }, // Tokyo
-                { location: [22.3193, 114.1694], size: 0.05 }, // HK
-                { location: [-33.8688, 151.2093], size: 0.05 }, // Sydney
-            ],
+            markers: visitorStats.locations,
             onRender: (state) => {
-                // Called on every animation frame.
-                // `state` will be an empty object, return updated params.
                 state.phi = phi;
                 phi += 0.01;
             },
@@ -44,18 +55,27 @@ export function GlobeCard() {
         return () => {
             globe.destroy();
         };
-    }, []);
+    }, [visitorStats.locations]);
 
     return (
         <div className="col-span-1 md:col-span-2 lg:col-span-2 row-span-2 bg-neutral-900 border border-neutral-800 rounded-xl relative overflow-hidden group hover:border-neutral-700 transition-colors">
             <div className="absolute top-6 left-6 z-10 pointer-events-none">
                 <div className="flex items-center gap-2 text-neutral-400">
                     <Globe size={18} />
-                    <span className="text-sm font-medium">Active Visitors</span>
+                    <span className="text-sm font-medium">Visitor Map</span>
                 </div>
-                <div className="mt-1">
-                    <span className="text-2xl font-bold text-white tracking-tight">1,240</span>
-                    <span className="text-xs text-neutral-500 ml-2 font-mono">LIVE</span>
+                <div className="mt-4 space-y-2">
+                    <div>
+                        <span className="text-2xl font-bold text-white tracking-tight block">{visitorStats.active24h}</span>
+                        <span className="text-xs text-neutral-500 font-mono">LAST 24H</span>
+                    </div>
+                </div>
+            </div>
+
+            <div className="absolute top-6 right-6 z-10 text-right pointer-events-none">
+                <div>
+                    <span className="text-xl font-bold text-neutral-300 block">{visitorStats.total}</span>
+                    <span className="text-xs text-neutral-500 font-mono">TOTAL</span>
                 </div>
             </div>