1import type { ReactNode } from "react";
2
3import { APP_DISPLAY_NAME, APP_STAGE_LABEL } from "../../branding";
4import { resolveSidebarStageBackdropVariant, StageBackdropArt } from "../SidebarStageBackdrop";
5import { StandalonePage } from "../ui/standalone-page";
6
7/**
8 * Branded masthead for the CLI-connect authorize and callback pages.
9 */
10export function AuthSurfaceShell({ children }: { readonly children: ReactNode }) {
11 const stageVariant = resolveSidebarStageBackdropVariant(APP_STAGE_LABEL);
12
13 return (
14 <StandalonePage
15 tone="brand"
16 masthead={
17 <header className="relative h-24 overflow-hidden bg-[linear-gradient(135deg,#1e61de,#17348e)] text-white">
18 {stageVariant ? (
19 <div className="absolute inset-0" aria-hidden>
20 <StageBackdropArt variant={stageVariant} />
21 </div>
22 ) : (
23 <div
24 aria-hidden
25 className="absolute inset-0 bg-[radial-gradient(circle_at_75%_25%,rgba(136,204,255,0.5),transparent_38%),linear-gradient(135deg,#2468df,#172f82)]"
26 />
27 )}
28 <div className="absolute inset-0 bg-[linear-gradient(to_bottom,transparent_20%,rgba(7,18,55,0.46)_100%)]" />
29 <div className="relative h-full p-5 sm:p-6">
30 <p className="text-3xs font-semibold tracking-widest text-white/80 uppercase">
31 {APP_DISPLAY_NAME}
32 </p>
33 </div>
34 </header>
35 }
36 >
37 {children}
38 </StandalonePage>
39 );
40}