Status Page Header

1"use client";
2 
3import { Button } from "@/components/ui/button";
4import { cn } from "@/lib/utils";
5 
6/**
7 * StatusPageHeader — presentation-only header chrome.
8 *
9 * Compose with `StatusPageHeaderContent`, `StatusPageHeaderBrand`,
10 * `StatusPageHeaderNav` (+ `Item`), and `StatusPageHeaderActions`. Embed
11 * gating, route-aware active state, mobile menu shell, brand link target,
12 * and tRPC fetch all stay in the wrapping app.
13 */
14export function StatusPageHeader({
15  className,
16  ...props
17}: React.ComponentProps<"header">) {
18  return (
19    <header
20      data-slot="status-page-header"
21      className={cn(className)}
22      {...props}
23    />
24  );
25}
26 
27export function StatusPageHeaderContent({
28  className,
29  ...props
30}: React.ComponentProps<"nav">) {
31  return (
32    <nav
33      data-slot="status-page-header-content"
34      className={cn(
35        "mx-auto flex max-w-2xl items-center justify-between gap-3 px-3 py-2",
36        className,
37      )}
38      {...props}
39    />
40  );
41}
42 
43/**
44 * StatusPageHeaderBrand — left-side fixed-width slot. Pass the brand button
45 * (with link target) as children.
46 */
47export function StatusPageHeaderBrand({
48  className,
49  ...props
50}: React.ComponentProps<"div">) {
51  return (
52    <div
53      data-slot="status-page-header-brand"
54      className={cn("flex w-[150px] shrink-0", className)}
55      {...props}
56    />
57  );
58}
59 
60/**
61 * StatusPageHeaderBrandButton — outlined size-8 icon button that hosts the
62 * brand link. Pass the actual link element as children via `asChild`.
63 */
64export function StatusPageHeaderBrandButton({
65  className,
66  ...props
67}: React.ComponentProps<typeof Button>) {
68  return (
69    <Button
70      data-slot="status-page-header-brand-button"
71      variant="outline"
72      size="icon"
73      className={cn("size-8 overflow-hidden", className)}
74      asChild
75      {...props}
76    />
77  );
78}
79 
80/**
81 * StatusPageHeaderBrandFallback — letter-from-title typography used when no
82 * page icon is present. Renders the first character of up to two words,
83 * uppercased.
84 */
85export function StatusPageHeaderBrandFallback({
86  title,
87  className,
88  ...props
89}: Omit<React.ComponentProps<"div">, "children"> & { title?: string }) {
90  const initials =
91    (title ?? "")
92      .trim()
93      .split(/\s+/)
94      .filter(Boolean)
95      .map((word) => word.charAt(0))
96      .slice(0, 2)
97      .join("")
98      .toUpperCase() || "?";
99  return (
100    <div
101      data-slot="status-page-header-brand-fallback"
102      className={cn(
103// … truncated