spb/countryatlas

1'use client';2import type { CSSProperties, ReactNode } from 'react';34/**5 * Floating HTML tooltip anchored inside a `relative` chart container. Values lead (strong), labels follow.6 * Pass `x`/`y` in container pixels; it flips to stay inside `width`.7 */8export function ChartTooltip({9  x,10  y,11  width,12  children,13}: {14  x: number;15  y: number;16  width: number;17  children: ReactNode;18}) {19  const flip = x > width * 0.6;20  const style: CSSProperties = {21    left: flip ? undefined : x + 10,22    right: flip ? width - x + 10 : undefined,23    top: Math.max(0, y - 8),24  };25  return (26    <div27      role="status"28      aria-live="polite"29      className="pointer-events-none absolute z-10 max-w-[min(260px,80vw)] rounded-sm border border-rule bg-surface px-2.5 py-1.5 text-xs shadow-pop tnum"30      style={style}31    >32      {children}33    </div>34  );35}3637export function TooltipRow({ color, label, value, muted }: { color?: string; label: string; value: string; muted?: boolean }) {38  return (39    <div className="flex items-baseline gap-2 py-0.5">40      {color ? <span aria-hidden className="inline-block h-0.5 w-3 shrink-0 self-center rounded-full" style={{ background: color }} /> : null}41      <span className={muted ? 'text-ink-3' : 'text-ink-2'}>{label}</span>42      <span className="ml-auto font-semibold text-ink">{value}</span>43    </div>44  );45}46