{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "analytics-card",
  "title": "Analytics Card",
  "description": "Compact analytics card with a headline metric over a world map.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@mapcn/map",
    "card",
    "badge"
  ],
  "files": [
    {
      "path": "src/registry/blocks/analytics-card/page.tsx",
      "content": "\"use client\";\n\nimport { TrendingUp } from \"lucide-react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport { Map, MapGeoJSON, MapMarker, MarkerContent } from \"@/components/ui/map\";\nimport { totalVisitors, visitorGrowth, visitorLocations } from \"./data\";\n\n// Country borders from a public CDN, or swap in your own GeoJSON.\nconst WORLD_GEOJSON =\n  \"https://cdn.jsdelivr.net/gh/nvkelso/natural-earth-vector@v5.1.2/geojson/ne_110m_admin_0_countries.geojson\";\n\nfunction bubbleSize(visitors: number) {\n  return Math.round(10 + Math.sqrt(visitors) * 2.2);\n}\n\nexport default function Page() {\n  return (\n    <div className=\"flex min-h-screen items-center justify-center p-8\">\n      <Card className=\"relative aspect-16/10 w-full max-w-md overflow-hidden py-0\">\n        <div className=\"absolute inset-0\">\n          <Map\n            center={[1, 30]}\n            scrollZoom={false}\n            dragRotate={false}\n            dragPan={false}\n            doubleClickZoom={false}\n            pitchWithRotate={false}\n            className=\"[&_.maplibregl-canvas]:cursor-default! [&_.maplibregl-canvas-container]:cursor-default!\"\n            blank\n          >\n            <MapGeoJSON data={WORLD_GEOJSON} linePaint={false} />\n            {visitorLocations.map((location) => {\n              const size = bubbleSize(location.visitors);\n              return (\n                <MapMarker\n                  key={location.city}\n                  longitude={location.lng}\n                  latitude={location.lat}\n                >\n                  <MarkerContent className=\"cursor-default\">\n                    <span\n                      className=\"bg-chart-2/80 block rounded-full\"\n                      style={{ width: size, height: size }}\n                    />\n                  </MarkerContent>\n                </MapMarker>\n              );\n            })}\n          </Map>\n        </div>\n\n        <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]\">\n          <CardDescription>Visitors</CardDescription>\n          <CardTitle className=\"text-lg tabular-nums\">\n            {totalVisitors}\n          </CardTitle>\n\n          <CardAction>\n            <Badge variant=\"outline\">\n              <TrendingUp />\n              {visitorGrowth} growth\n            </Badge>\n          </CardAction>\n        </CardHeader>\n      </Card>\n    </div>\n  );\n}\n",
      "type": "registry:page",
      "target": "app/analytics-card/page.tsx"
    },
    {
      "path": "src/registry/blocks/analytics-card/data.ts",
      "content": "export interface VisitorLocation {\n  city: string;\n  lng: number;\n  lat: number;\n  visitors: number;\n}\n\nexport const totalVisitors = \"418.2K\";\nexport const visitorGrowth = \"+12%\";\n\nexport const visitorLocations: VisitorLocation[] = [\n  { city: \"San Francisco\", lng: -122.4194, lat: 37.7749, visitors: 62 },\n  { city: \"New York\", lng: -74.006, lat: 40.7128, visitors: 58 },\n  { city: \"Mexico City\", lng: -99.1332, lat: 19.4326, visitors: 22 },\n  { city: \"Sao Paulo\", lng: -46.6333, lat: -23.5505, visitors: 30 },\n  { city: \"London\", lng: -0.1276, lat: 51.5074, visitors: 48 },\n  { city: \"Berlin\", lng: 13.405, lat: 52.52, visitors: 28 },\n  { city: \"Madrid\", lng: -3.7038, lat: 40.4168, visitors: 18 },\n  { city: \"Lagos\", lng: 3.3792, lat: 6.5244, visitors: 16 },\n  { city: \"Dubai\", lng: 55.2708, lat: 25.2048, visitors: 24 },\n  { city: \"Mumbai\", lng: 72.8777, lat: 19.076, visitors: 40 },\n  { city: \"Singapore\", lng: 103.8198, lat: 1.3521, visitors: 21 },\n  { city: \"Tokyo\", lng: 139.6917, lat: 35.6895, visitors: 38 },\n  { city: \"Seoul\", lng: 126.978, lat: 37.5665, visitors: 26 },\n  { city: \"Sydney\", lng: 151.2093, lat: -33.8688, visitors: 17 },\n];\n",
      "type": "registry:component",
      "target": "app/analytics-card/data.ts"
    }
  ],
  "meta": {
    "iframeHeight": "600px"
  },
  "categories": [
    "analytics",
    "card"
  ],
  "type": "registry:block"
}