spb/internetpressure

1import type { Metadata } from 'next';2import Link from 'next/link';3import { LargestGrid, MonthStrip, TopEvents, TopLists } from '@/components/history/HistoryViews';4import { Section } from '@/components/ui/primitives';5import { apiGet } from '@/lib/api';6import type { HistorySummary } from '@/lib/types';78export const dynamic = 'force-dynamic';9export const metadata: Metadata = { title: 'History', description: 'Explore the proprietary history of Global Internet Pressure: months, days, largest events, most affected networks and regions.' };1011export default async function HistoryPage() {12  const s = await apiGet<HistorySummary>('/api/v1/history/summary');13  return (14    <div className="pb-8">15      <header className="pt-6 pb-4">16        <p className="label">History explorer</p>17        <h1 className="mt-1 text-[26px] font-medium tracking-tight sm:text-[32px]">All time</h1>18        <p className="mt-1 max-w-[760px] text-[13px] text-ink-2">Pressure history is retained indefinitely (1-minute for a year, 5-minute for three, hourly forever). Every incident page is kept. Browse by month, then by day.</p>19        <nav className="num mt-3 flex flex-wrap gap-2 text-[12px]" aria-label="Available months">20          {s.available_months.map((m) => {21            const [y, mo] = m.split('-');22            return (23              <Link key={m} href={`/history/${y}/${Number(mo)}`} className="rounded-[3px] border border-line px-2 py-1 text-ink-2 hover:text-ink">24                {m}25              </Link>26            );27          })}28        </nav>29      </header>30      <Section label="Months">31        <MonthStrip months={s.months ?? []} />32      </Section>33      <Section label="Largest events">34        <LargestGrid largest={s.largest} />35      </Section>36      <TopLists s={s} />37      <Section label="Top events" right={<Link href="/incidents" className="hover:text-ink">all incidents →</Link>}>38        <TopEvents events={s.top_events} />39      </Section>40    </div>41  );42}43