71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import createGlobe from 'cobe';
|
|
import { useEffect, useRef } from 'react';
|
|
import { Globe } from 'lucide-react';
|
|
|
|
export function GlobeCard() {
|
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
|
|
useEffect(() => {
|
|
let phi = 0;
|
|
|
|
if (!canvasRef.current) return;
|
|
|
|
const globe = createGlobe(canvasRef.current, {
|
|
devicePixelRatio: 2,
|
|
width: 600 * 2,
|
|
height: 600 * 2,
|
|
phi: 0,
|
|
theta: 0,
|
|
dark: 1,
|
|
diffuse: 1.2,
|
|
mapSamples: 16000,
|
|
mapBrightness: 6,
|
|
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
|
|
],
|
|
onRender: (state) => {
|
|
// Called on every animation frame.
|
|
// `state` will be an empty object, return updated params.
|
|
state.phi = phi;
|
|
phi += 0.01;
|
|
},
|
|
});
|
|
|
|
return () => {
|
|
globe.destroy();
|
|
};
|
|
}, []);
|
|
|
|
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>
|
|
</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>
|
|
</div>
|
|
|
|
<div className="absolute inset-0 flex items-center justify-center opacity-80 mt-10">
|
|
<canvas
|
|
ref={canvasRef}
|
|
style={{ width: 600, height: 600, maxWidth: '100%', aspectRatio: 1 }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|