50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1d97,import { StatusIcon as UnifiedStatusIcon } from "@/components/blocks/status-icon"; import { cn } from "@/lib/utils"; /** * Status - Root container component for status page layouts * * This component serves as the primary container for status page content, providing * consistent spacing and establishing the status type context via data attributes. * The status type controls the visual appearance of child StatusIcon components * through CSS data attribute selectors (group-data-[variant=...]). * * The component acts as both a CSS group and peer for advanced selector patterns, * enabling child components to style themselves based on the parent's status. * * @param variant - The status type that determines the overall status indicator appearance * * @example * ```tsx * * * * System Status * * * {// Status components here} * * * ``` * * @see StatusHeader - For header content with brand and title * @see StatusContent - For main status content area * @see StatusIcon - For status indicator icons that respond to variant */ export function Status({ children, className, variant = "success", ...props }: React.ComponentProps<"div"> & { variant?: "success" | "degraded" | "error" | "info"; }) { return (

{children}

); } Status.displayName = "Status"; /** * StatusBrand - Brand logo/image component for status page headers * * Displays a brand image (typically a company logo) with consistent sizing. * The default size is 32x32px (size-8), suitable for header placement. * * @param src - Image source URL * @param alt - Alternative text for the image (required for accessibility) * * @example * ```tsx * * * System Status * * ``` * * @see StatusHeader - For positioning brand within header layout */ export function StatusBrand({ src, alt, className, ...props }: React.ComponentProps<"img">) { return ( {alt}

); } StatusBrand.displayName = "StatusBrand"; /** * StatusHeader - Header container for status page branding and title * * Provides a container-query context (@container/status-header) for responsive * header layouts. Typically contains StatusBrand, StatusTitle, and StatusDescription * components arranged in a flexible layout. * * The container query context enables child components to respond to the header's * width rather than the viewport width, allowing for more modular layouts. * * @example * ```tsx * *

* *

* System Status * Current system health *

* * ``` * * @see StatusBrand - For brand logo placement * @see StatusTitle - For page title * @see StatusDescription - For subtitle text */ export function StatusHeader({ children, className, ...props }: React.ComponentProps<"div">) { return (

{children}

); } StatusHeader.displayName = "StatusHeader"; /** * StatusTitle - Primary heading for status page * * Displays the main title with consistent typography (semibold, large text, tight leading). * Typically used within StatusHeader to show the page or organization name. * * The component uses semantic HTML div rather than h1 to allow flexible heading * levels based on page context. Apply appropriate heading tags as needed. * * @example * ```tsx * * Acme Inc. Status * Live system status and uptime * * ``` * * @see StatusDescription - For subtitle text below the title */ export function StatusTitle({ children, className, ...props }: React.ComponentProps<"div">) { return (

{children}

); } StatusTitle.displayName = "StatusTitle"; /** * StatusDescription - Descriptive subtitle or secondary text * * Displays muted secondary text, typically used for subtitles, additional context, * or descriptions. The text color is set to muted foreground for visual hierarchy. * * @example * ```tsx * * System Status * * Real-time monitoring of all services * * * ``` * * @see StatusTitle - For primary heading text */ export function StatusDescription({ children, className, }: React.ComponentProps<"div">) { return (

{children}

); } StatusDescription.displayName = "StatusDescription"; /** * StatusContent - Main content area for status page components * * Provides a vertical flex container with consistent spacing (gap-3) for status * page content. This is typically used to stack StatusComponent, StatusBanner, * or other status-related components. * * @example * ```tsx * * * System Status * * * API * Database * CDN * * * ``` * * @see Status - For root container * @see StatusComponent - For individual service status displays */ export function StatusContent({ children, className, }: React.ComponentProps<"div">) { return (

{children}

); } StatusContent.displayName = "StatusContent"; /** * StatusIcon - Status indicator icon wrapper for Status component context * * This component wraps the unified StatusIcon with variant="default", configuring * it to respond to the parent Status component's data-variant attribute. * The displayed icon automatically changes based on the status type: * - success: CheckIcon * - degraded: TriangleAlertIcon * - error: AlertCircleIcon * - info: WrenchIcon * * @example * ```tsx * * * * All Systems Operational * * * ``` * * @see Status - For setting the variant context * @see StatusIcon from status-icon.tsx - For the underlying unified icon implementation */ export function StatusIcon({ className, ...props }: React.ComponentProps<"div">) { return ( ); } StatusIcon.displayName = "StatusIcon"; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@openstatus","registryDependencies":["https://openstatus.dev/r/status-icon.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/blocks/status-layout.tsx","content":"$52","type":"registry:ui","target":"components/blocks/status-layout.tsx"}],"className":"h-[70svh] min-h-80"}]]}]