card-globe

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