Analytics Card

1"use client";
2 
3import { TrendingUp } from "lucide-react";
4 
5import { Badge } from "@/components/ui/badge";
6import {
7  Card,
8  CardAction,
9  CardDescription,
10  CardHeader,
11  CardTitle,
12} from "@/components/ui/card";
13import { Map, MapGeoJSON, MapMarker, MarkerContent } from "@/components/ui/map";
14import { totalVisitors, visitorGrowth, visitorLocations } from "./data";
15 
16// Country borders from a public CDN, or swap in your own GeoJSON.
17const WORLD_GEOJSON =
18  "https://cdn.jsdelivr.net/gh/nvkelso/natural-earth-vector@v5.1.2/geojson/ne_110m_admin_0_countries.geojson";
19 
20function bubbleSize(visitors: number) {
21  return Math.round(10 + Math.sqrt(visitors) * 2.2);
22}
23 
24export default function Page() {
25  return (
26    <div className="flex min-h-screen items-center justify-center p-8">
27      <Card className="relative aspect-16/10 w-full max-w-md overflow-hidden py-0">
28        <div className="absolute inset-0">
29          <Map
30            center={[1, 30]}
31            scrollZoom={false}
32            dragRotate={false}
33            dragPan={false}
34            doubleClickZoom={false}
35            pitchWithRotate={false}
36            className="[&_.maplibregl-canvas]:cursor-default! [&_.maplibregl-canvas-container]:cursor-default!"
37            blank
38          >
39            <MapGeoJSON data={WORLD_GEOJSON} linePaint={false} />
40            {visitorLocations.map((location) => {
41              const size = bubbleSize(location.visitors);
42              return (
43                <MapMarker
44                  key={location.city}
45                  longitude={location.lng}
46                  latitude={location.lat}
47                >
48                  <MarkerContent className="cursor-default">
49                    <span
50                      className="bg-chart-2/80 block rounded-full"
51                      style={{ width: size, height: size }}
52                    />
53                  </MarkerContent>
54                </MapMarker>
55              );
56            })}
57          </Map>
58        </div>
59 
60        <CardHeader className="from-card via-card/85 to-card/0 relative z-10 gap-1 rounded-t-[inherit] bg-linear-to-b pt-4 pb-10 mask-[linear-gradient(to_bottom,black_calc(100%_-_2.5rem),transparent)] backdrop-blur-[2px]">
61          <CardDescription>Visitors</CardDescription>
62          <CardTitle className="text-lg tabular-nums">
63            {totalVisitors}
64          </CardTitle>
65 
66          <CardAction>
67            <Badge variant="outline">
68              <TrendingUp />
69              {visitorGrowth} growth
70// … truncated