Status Page Footer

1"use client";
2 
3import { useStatusBlocksLabels } from "@/components/blocks/status-i18n";
4import { cn } from "@/lib/utils";
5 
6/**
7 * StatusPageFooter — presentation-only footer chrome.
8 *
9 * Compose with `StatusPageFooterContent`, `StatusPagePoweredBy`, and
10 * `StatusPageFooterActions`. Embed / white-label gating, locale + theme
11 * switchers, and the tRPC fetch all stay in the wrapping app.
12 */
13export function StatusPageFooter({
14  className,
15  ...props
16}: React.ComponentProps<"footer">) {
17  return (
18    <footer
19      data-slot="status-page-footer"
20      className={cn(className)}
21      {...props}
22    />
23  );
24}
25 
26export function StatusPageFooterContent({
27  className,
28  ...props
29}: React.ComponentProps<"div">) {
30  return (
31    <div
32      data-slot="status-page-footer-content"
33      className={cn(
34        "mx-auto flex max-w-2xl items-center justify-between gap-4 px-3 py-2",
35        className,
36      )}
37      {...props}
38    />
39  );
40}
41 
42/**
43 * StatusPagePoweredBy — "powered by …" line. The link element (with href,
44 * target, utm params, app-specific Link wrapper, etc.) is supplied as
45 * children so the block stays routing-agnostic.
46 */
47export function StatusPagePoweredBy({
48  children,
49  className,
50  ...props
51}: React.ComponentProps<"p">) {
52  const labels = useStatusBlocksLabels();
53  return (
54    <p
55      data-slot="status-page-powered-by"
56      className={cn(
57        "text-muted-foreground font-mono text-xs leading-none sm:text-sm",
58        className,
59      )}
60      {...props}
61    >
62      {labels.poweredBy} {children}
63    </p>
64  );
65}
66 
67/**
68 * StatusPageFooterActions — right-side cluster (last-updated, locale,
69 * theme). Pass actions as children; the block is layout-only.
70 */
71export function StatusPageFooterActions({
72  className,
73  ...props
74}: React.ComponentProps<"div">) {
75  return (
76    <div
77      data-slot="status-page-footer-actions"
78      className={cn("flex items-center gap-2", className)}
79      {...props}
80    />
81  );
82}