Status Page Shell

1import { cn } from "@/lib/utils";
2 
3/**
4 * StatusPageShell — outer chrome wrapper around `<header>`, `<main>`, and
5 * `<footer>`.
6 *
7 * Bare structural `<div>` with sensible defaults (full-height column with
8 * gap). Routing-agnostic: it knows nothing about embed mode. Apps that
9 * support embedding wrap this with their own provider that toggles
10 * `group/embed` + `data-embed` / `data-hide-*` attributes from above.
11 *
12 * Override `min-h-screen` via `className` (e.g. `min-h-0`) when mounting
13 * inside a constrained container like a dashboard preview card.
14 */
15export function StatusPageShell({
16  className,
17  ...props
18}: React.ComponentProps<"div">) {
19  return (
20    <div
21      data-slot="status-page-shell"
22      className={cn("flex min-h-screen flex-col gap-4", className)}
23      {...props}
24    />
25  );
26}
27 
28/**
29 * StatusPageMain — inner `<main>` content column.
30 *
31 * Centers content at `max-w-2xl` with the canonical padding and column
32 * layout. Routing- and embed-agnostic: callers that support an embed mode
33 * layer their own `group-data-*` classes via `className`.
34 */
35export function StatusPageMain({
36  className,
37  ...props
38}: React.ComponentProps<"main">) {
39  return (
40    <main
41      data-slot="status-page-main"
42      className={cn(
43        "mx-auto flex w-full max-w-2xl flex-1 flex-col px-3 py-2",
44        className,
45      )}
46      {...props}
47    />
48  );
49}