'use client';
/*
* Vireo Next.js — shared helpers for the STANDALONE error pages (401/403/404/500/503).
*
* 1:1 re-expression of src/html/error/*.html. Each error screen is a full-viewport
* standalone page (no app shell): the fixed top-right off-app tools (theme toggle
* ghost icon-btn + "Back to dashboard" link), a brand lockup, a thin-line
* illustration, the code + title + body, page-specific actions and helper links.
*
* Adapted from the React edition (editions/react/src/pages/error/errorShared.tsx);
* the only differences are next/link (Link `href` not `to`) and the 'use client'
* boundary (these use hooks). Like the Next (bare) auth wrapper, the page loader +
* ambient glow are rendered ONCE by app/(bare)/layout.tsx, so StatusStandalone does
* NOT repeat them (unlike the React wrapper which owns them) — avoids a double
* loader/ambient.
*/
import { useEffect, useState, type ReactNode } from 'react';
import Link from 'next/link';
const MOON_BTN = (
);
const ARROW_BACK = (
);
/** Fixed top-right off-app tools: theme toggle + back-to-dashboard link. */
export function StatusTools() {
const toggle = () => {
const html = document.documentElement;
html.setAttribute('data-ax-theme', html.getAttribute('data-ax-theme') === 'dark' ? 'light' : 'dark');
};
return (
{ARROW_BACK}
Back to dashboard
);
}
const HEX_LOGO = (
);
/** Centered brand lockup (links home). */
export function StatusBrand() {
return (
{HEX_LOGO}
Vireo
);
}
/**
* Standalone status-page wrapper: sets while mounted
* (the reference puts that class on ), then renders the fixed off-app tools
* and the centered content. The loader + ambient glow come from the (bare)
* route-group layout.
*/
export function StatusStandalone({ maxWidth = 520, children }: { maxWidth?: number; children: ReactNode }) {
useEffect(() => {
const b = document.body;
const had = b.className;
b.classList.add('ax-standalone');
return () => {
b.className = had;
};
}, []);
return (
<>
{children}
);
}
/** Shared code + title + body block. */
export function StatusHeading({ code, title, body, bodyMaxCh = 42 }: { code: string; title: string; body: ReactNode; bodyMaxCh?: number }) {
return (