"use client"; import { useMemo, useState } from "react"; import { useTheme } from "next-themes"; import { Map, MapControls, MapGeoJSON, MapPopup } from "@/components/ui/map"; import { useWorldData } from "@/lib/use-world-data"; import { mapConfig, visitorsByCountry, type Theme } from "./data"; // WebGL paint can't read CSS variables, so we build a concrete value→color // expression per theme. The hovered country is highlighted in place via the // `hover` feature-state, restricted to countries that actually have data. function buildFillColor(theme: Theme): unknown[] { const { base, ramp, hover } = mapConfig.colors[theme]; const [s0, s1, s2, s3, s4] = mapConfig.scaleStops; const ramped = [ "interpolate", ["linear"], ["coalesce", ["get", "visitors"], 0], s0, base, s1, ramp[0], s2, ramp[1], s3, ramp[2], s4, ramp[3], ]; return [ "case", [ "all", ["boolean", ["feature-state", "hover"], false], [">", ["coalesce", ["get", "visitors"], 0], 0], ], hover, ramped, ]; } const legendGradientStyle = { "--choropleth-ramp-light": `linear-gradient(to right, ${mapConfig.colors.light.ramp.join(", ")})`, "--choropleth-ramp-dark": `linear-gradient(to right, ${mapConfig.colors.dark.ramp.join(", ")})`, } as React.CSSProperties; interface HoverInfo { name: string; visitors: number; lng: number; lat: number; } interface CountryProperties { NAME_LONG: string; visitors: number; } type CountryFeatureCollection = GeoJSON.FeatureCollection< GeoJSON.Geometry, CountryProperties >; export default function Page() { const { resolvedTheme } = useTheme(); const theme: Theme = resolvedTheme === "dark" ? "dark" : "light"; const [hover, setHover] = useState(null); const world = useWorldData(); const countries = useMemo(() => { if (!world) return null; return { type: "FeatureCollection", features: world.features.map((f) => ({ ...f, properties: { NAME_LONG: f.properties.NAME_LONG, visitors: visitorsByCountry[f.properties.NAME_LONG] ?? 0, }, })), }; }, [world]); // Recompute paint only when the theme changes; MapGeoJSON recolors in place. const fillPaint = useMemo( () => ({ "fill-color": buildFillColor(theme) as never, "fill-opacity": 0.92, }), [theme], ); return (

{countries && ( data={countries} promoteId="NAME_LONG" fillPaint={fillPaint} interactive onHover={(e) => { const visitors = e?.feature.properties.visitors ?? 0; // Only countries with data are interactive. if (!e || visitors <= 0) { setHover(null); return; } setHover({ name: e.feature.properties.NAME_LONG, visitors, lng: e.longitude, lat: e.latitude, }); }} /> )} {hover && (

{hover.name}

Visitors {hover.visitors.toLocaleString()}

)}

Visitors by country

Low High

); }