Uptime Monitor

1"use client";
2 
3import { Map, MapControls, MapGeoJSON } from "@/components/ui/map";
4import { EdgeNodeMarker } from "./components/edge-node-marker";
5import { StatusSidebar } from "./components/status-sidebar";
6import { edgeNodes, mapView, WORLD_GEOJSON } from "./data";
7 
8export default function Page() {
9  return (
10    <div className="flex min-h-screen items-center justify-center p-4">
11      <div className="bg-card flex h-[500px] w-full max-w-4xl overflow-hidden rounded-xl border shadow-sm">
12        <StatusSidebar nodes={edgeNodes} />
13 
14        <div className="relative min-w-0 flex-1">
15          <Map
16            blank
17            center={mapView.center}
18            zoom={mapView.zoom}
19            minZoom={mapView.minZoom}
20            maxZoom={mapView.maxZoom}
21            scrollZoom={false}
22            dragRotate={false}
23            pitchWithRotate={false}
24          >
25            <MapGeoJSON data={WORLD_GEOJSON} linePaint={false} />
26 
27            {edgeNodes.map((node) => (
28              <EdgeNodeMarker key={node.id} node={node} />
29            ))}
30 
31            <MapControls className="bottom-2" />
32          </Map>
33        </div>
34      </div>
35    </div>
36  );
37}