card-globe

1'use client';
2import { cn } from '@/lib/utils';
3import createGlobe from 'cobe';
4import type React from 'react';
5import { useEffect, useRef, useState } from 'react';
6 
7interface EarthProps {
8  className?: string;
9  theta?: number;
10  dark?: number;
11  scale?: number;
12  diffuse?: number;
13  mapSamples?: number;
14  mapBrightness?: number;
15  baseColor?: [number, number, number];
16  markerColor?: [number, number, number];
17  glowColor?: [number, number, number];
18}
19const Earth: React.FC<EarthProps> = ({
20  className,
21  theta = 0.25,
22  dark = 1,
23  scale = 1.1,
24  diffuse = 1.2,
25  mapSamples = 40000,
26  mapBrightness = 6,
27  baseColor = [0.4, 0.6509, 1],
28  markerColor = [1, 0, 0],
29  glowColor = [0.2745, 0.5765, 0.898],
30}) => {
31  const canvasRef = useRef<HTMLCanvasElement>(null);
32 
33  useEffect(() => {
34    let width = 0;
35    const onResize = () => canvasRef.current && (width = canvasRef.current.offsetWidth);
36    window.addEventListener('resize', onResize);
37    onResize();
38    let phi = 0;
39 
40    onResize();
41    const globe = createGlobe(canvasRef.current!, {
42      devicePixelRatio: 2,
43      width: width * 2,
44      height: width * 2,
45      phi: 0,
46      theta: theta,
47      dark: dark,
48      scale: scale,
49      diffuse: diffuse,
50      mapSamples: mapSamples,
51      mapBrightness: mapBrightness,
52      baseColor: baseColor,
53      markerColor: markerColor,
54      glowColor: glowColor,
55      opacity: 1,
56      offset: [0, 0],
57      markers: [
58        // longitude latitude
59      ],
60      onRender: (state: Record<string, any>) => {
61        // Called on every animation frame.
62        // `state` will be an empty object, return updated params.\
63        state.phi = phi;
64        phi += 0.003;
65      },
66    });
67 
68    return () => {
69      globe.destroy();
70    };
71  }, []);
72 
73  return (
74    <div
75      className={cn(
76        'flex items-center justify-center z-10 w-full max-w-[350px] mx-auto',
77        className
78      )}
79    >
80      <canvas
81        ref={canvasRef}
82        style={{
83          width: '100%',
84          height: '100%',
85          maxWidth: '100%',
86          aspectRatio: '1',
87        }}
88      />
89    </div>
90  );
91};
92 
93export default Earth;