spb/websensor

1import Link from "next/link";2import type { Metadata } from "next";3import { Bar, Empty, Flag, PageHeader, Panel, Table, Td } from "@/components/ui";4import { api } from "@/lib/api";5import { fmtInt } from "@/lib/format";67export const dynamic = "force-dynamic";8export const metadata: Metadata = { title: "Countries", description: "Country desks: government, business, infrastructure, health, media, cyber, AI and science signals for every country WebSensor covers.", alternates: { canonical: "/country" } };910export default async function CountriesPage() {11  const { items } = await api.countries();12  const totals = items.reduce((a, c) => ({ sources: a.sources + c.sources, events: a.events + c.events_24h, breaking: a.breaking + c.breaking_24h }), { sources: 0, events: 0, breaking: 0 });13  const max = Math.max(1, ...items.map((c) => c.events_24h));14  return (15    <>16      <PageHeader compact kicker="Desks" title="Countries" description={`${fmtInt(items.length)} countries · ${fmtInt(totals.sources)} sources · ${fmtInt(totals.events)} events and ${fmtInt(totals.breaking)} breaking signals in the last 24 h. Each desk groups official government, business, infrastructure, health and media signals by jurisdiction.`} />17      <Panel dense>18        {items.length === 0 ? (19          <Empty>Country desks appear once sources carry a country.</Empty>20        ) : (21          <Table head={["", "Country", "Code", "Sources", "Events 24 h", "", "Breaking 24 h", ""]}>22            {items.map((c) => (23              <tr key={c.country} className="hover:bg-panel-2/60">24                <Td className="w-8 text-base leading-none">{c.flag || <Flag code={c.country} />}</Td>25                <Td><Link href={`/country/${c.slug}`} className="font-medium hover:underline">{c.name}</Link></Td>26                <Td mono className="text-fg-subtle">{c.country}</Td>27                <Td mono>{fmtInt(c.sources)}</Td>28                <Td mono>{fmtInt(c.events_24h)}</Td>29                <Td><div className="w-20 sm:w-40"><Bar value={c.events_24h} max={max} /></div></Td>30                <Td mono className={c.breaking_24h ? "text-hot" : "text-fg-subtle"}>{fmtInt(c.breaking_24h)}</Td>31                <Td><Link href={`/country/${c.slug}`} className="whitespace-nowrap text-[11px] text-fg-subtle hover:text-fg">desk →</Link></Td>32              </tr>33            ))}34          </Table>35        )}36      </Panel>37    </>38  );39}40