Mobile adaptation

TriagePage.tsxThree answers the caller must supply, a share computed from the counts, and one thumb-sized route to the full page. Nothing in a tooltip.Copy

import { cn } from "@/lib/utils";

/**
 * The phone version, designed for triage rather than reflowed from the grid.
 *
 * Three questions and a way out. Is it real, how bad, can it wait, then a
 * route to the full dashboard for the case where the answer is "open the
 * laptop". Every answer is a prop the caller has to supply, so a page that
 * cannot answer one of them is a page that should not have a phone version.
 * Nothing lives in a tooltip, because there is no hover, and the one target
 * is tall enough for a thumb.
 */
type Props = {
  title: string;
  /** Has the alert been corroborated by a second signal? A single rule
   *  firing is a claim; two is a fact. */
  real: boolean;
  /** How bad, as a share of a named thing. Rendered as "4.1% of checkouts",
   *  computed here so the page and the source cannot disagree. */
  affected: number;
  total: number;
  of: string;
  /** Whether it can wait until morning. The rule that decides lives with
   *  the alert, not here. */
  canWait: boolean;
  /** The full desktop page. Required: a summary with no way past it is a
   *  dead end at 3 a.m. */
  fullHref: string;
  onOpenFull?: () => void;
};

const yesNo = (b: boolean) => (b ? "yes" : "no");

export function TriagePage({ title, real, affected, total, of, canWait, fullHref, onOpenFull }: Props) {
  const share = `${((affected / total) * 100).toFixed(1)}% of ${of}`;

  return (
    <div className="flex flex-col gap-2 rounded-lg border bg-card p-3">
      <p className="truncate text-[11px] text-muted-foreground">{title}</p>

      <dl className="flex flex-col gap-2">
        <div className={cn("rounded-[2px] border p-2", real && "border-foreground")}>
          <dt className="text-[10px] text-muted-foreground">Is it real</dt>
          <dd className="text-base font-medium text-card-foreground">{yesNo(real)}</dd>
        </div>
        <div className="rounded-[2px] border p-2">
          <dt className="text-[10px] text-muted-foreground">How bad</dt>
          <dd className="text-[11px] tabular-nums text-card-foreground">{share}</dd>
        </div>
        <div className="rounded-[2px] border p-2">
          <dt className="text-[10px] text-muted-foreground">Can it wait</dt>
          <dd className={cn("text-base font-medium", canWait ? "text-card-foreground" : "text-status-critical")}>{yesNo(canWait)}</dd>
        </div>
      </dl>

      {/* 44px tall: the WCAG minimum for a finger, and the one control on the page. */}
      <a
        href={fullHref}
        onClick={onOpenFull}
        className="flex min-h-11 items-center justify-center rounded-md border text-xs text-card-foreground"
      >
        Open the full dashboard
      </a>
    </div>
  );
}

demo.tsxHow it is called: a checkout alert, 287 of 7,000 failed, corroborated, cannot wait.Copy

import { TriagePage } from "./TriagePage";

/**
 * The page an alert links to. 287 of the last 7,000 checkouts failed, which
 * the page states as 4.1%, a second signal agrees, and it cannot wait.
 */
export default function Demo() {
  return (
    <div className="w-[180px]">
      <TriagePage
        title="Checkout failures"
        real={true}
        affected={287}
        total={7000}
        of="checkouts"
        canWait={false}
        fullHref="/dashboards/checkout"
      />
    </div>
  );
}