import type { ReactNode } from "react"; import { cn } from "@/lib/utils"; /** A page's title (30px, tight) with an optional line under it and an action on the right. */ export function PageHeader({ title, children, action, className }: { title: string; children?: ReactNode; action?: ReactNode; className?: string }) { return (

{title}

{children &&

{children}

}

{action}

); } /** A block of a page with a small muted heading. */ export function Section({ title, children, className }: { title?: string; children: ReactNode; className?: string }) { return (

{title &&

{title}

} {children}

); } /** Rows in a rounded, bordered box, divided by hairlines. */ export function List({ children, className }: { children: ReactNode; className?: string }) { return

{children}

; } /** A short message: warn (amber), error, or ok (a plain outline). */ export function Notice({ tone = "warn", children, className }: { tone?: "warn" | "error" | "ok"; children: ReactNode; className?: string }) { return (

{children}

); } const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" }); /** "3 days ago", "just now". */ export function ago(ms: number, locale?: string): string { const fmt = locale ? new Intl.RelativeTimeFormat(locale, { numeric: "auto" }) : rtf; const s = Math.round((ms - Date.now()) / 1000); const units: [Intl.RelativeTimeFormatUnit, number][] = [ ["year", 31536000], ["month", 2592000], ["week", 604800], ["day", 86400], ["hour", 3600], ["minute", 60], ]; for (const [unit, size] of units) if (Math.abs(s) >= size) return fmt.format(Math.round(s / size), unit); return fmt.format(0, "second"); }