Service Status Strip

import { ArrowRightIcon, CheckCircleIcon } from "@phosphor-icons/react/dist/ssr"

import { Section } from "@/components/editorial/section"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Service status",
  status: "All systems operational",
  link: "Status page",
} as const

// 0.02% of 90 days is about 26 minutes, all of it in the incident 23 days ago.
const FIGURES = [
  { value: "99.98%", label: "uptime over 90 days" },
  { value: "41 ms", label: "median API response today" },
  { value: "23 days", label: "since the last incident" },
] as const

export default function StatusStrip01() {
  return (
    <Section size="sm" className="border-y border-border py-6">
      <h2 className="sr-only">{COPY.title}</h2>
      {/* Phones stack the status, the figures and the link. From 42rem the
          status and link share the first row over the figures; from 64rem all
          three sit on one line. */}
      <div className="grid items-center gap-4 @2xl/section:grid-cols-[minmax(0,1fr)_auto] @2xl/section:gap-x-6 @5xl/section:grid-cols-[auto_minmax(0,1fr)_auto] @5xl/section:gap-x-6">
        <p className="flex items-center gap-2 text-sm font-medium @2xl/section:col-start-1 @2xl/section:row-start-1">
          <CheckCircleIcon
            weight="fill"
            aria-hidden="true"
            className="size-5 shrink-0"
          />
          <span>{COPY.status}</span>
        </p>
        {/* Figures size to their content, 24px either side of each divider. */}
        <dl className="flex flex-col gap-3 border-border @md/section:flex-row @md/section:gap-0 @2xl/section:col-span-2 @2xl/section:row-start-2 @5xl/section:col-span-1 @5xl/section:col-start-2 @5xl/section:row-start-1 @5xl/section:border-l @5xl/section:pl-6">
          {FIGURES.map((figure) => (
            <div
              key={figure.label}
              className="flex min-w-0 flex-col gap-0.5 border-border @md/section:ml-6 @md/section:border-l @md/section:pl-6 @md/section:first:ml-0 @md/section:first:border-l-0 @md/section:first:pl-0"
            >
              <dt className="text-xs text-pretty text-muted-foreground">
                {figure.label}
              </dt>
              <dd className="order-first text-lg font-medium tabular-nums">
                {figure.value}
              </dd>
            </div>
          ))}
        </dl>
        {/* Point this at your status page. */}
        <a
          href="#"
          className="inline-flex items-center gap-1 justify-self-start rounded-sm text-sm font-medium underline decoration-current/40 underline-offset-4 hover:decoration-current focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current @2xl/section:col-start-2 @2xl/section:row-start-1 @2xl/section:justify-self-end @5xl/section:col-start-3"
        >
          {COPY.link}
          <ArrowRightIcon aria-hidden="true" className="size-3.5" />
        </a>
      </div>
    </Section>
  )
}

pnpm dlx shadcn add @01orbital/status-strip-01

npx shadcn add @01orbital/status-strip-01

yarn shadcn add @01orbital/status-strip-01

bunx --bun shadcn add @01orbital/status-strip-01