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:T3f63,"use client"; import { useStatusBlocksLabels } from "@/components/blocks/status-i18n"; import { StatusIcon as UnifiedStatusIcon } from "@/components/blocks/status-icon"; import { StatusTimestamp } from "@/components/blocks/status-timestamp"; import type { StatusType } from "@/components/blocks/status.types"; import { Tabs, TabsContent, TabsList, TabsTrigger, } from "@/components/ui/tabs"; import { cn } from "@/lib/utils"; /** * StatusBanner - Complete banner component with integrated icon, message, and timestamp * * A fully composed banner component that displays a prominent status message with: * - Status-colored icon on the left * - Automatic status message (e.g., "All Systems Operational") * - Current timestamp on the right * * The banner automatically styles itself based on the status type with colored * backgrounds and borders. This is the simplest way to display a status banner * when you don't need custom content. * * For custom banner content, use StatusBannerContainer with manual composition. * * @param status - The status type that determines appearance and message * * @example * ```tsx * * // Displays: [✓ icon] All Systems Operational | Jan 15, 2024 10:30 (UTC) * ``` * * @example * ```tsx * * // Displays: [⚠ icon] Degraded Performance | Jan 15, 2024 10:30 (UTC) * ``` * * @see StatusBannerContainer - For custom banner composition * @see StatusBannerMessage - For the automatic status message * @see StatusTimestamp - For the timestamp display */ export function StatusBanner({ className, status, }: React.ComponentProps<"div"> & { status?: Exclude; }) { return (

); } StatusBanner.displayName = "StatusBanner"; /** * StatusBannerContainer - Base container for status banner composition * * Provides a rounded, bordered container with status-based styling via data * attributes. The container acts as a CSS group (/status-banner) enabling child * components to style themselves based on the status type. * * Background colors automatically adjust for light/dark mode: * - success: Green tint (bg-success/5 light, bg-success/10 dark) * - degraded: Yellow tint (bg-warning/5 light, bg-warning/10 dark) * - error: Red tint (bg-destructive/5 light, bg-destructive/10 dark) * - info: Blue tint (bg-info/5 light, bg-info/10 dark) * * @param status - The status type for styling * * @example * ```tsx * * Active Incident * *

We are experiencing issues with the API.

* * * ``` * * @see StatusBanner - For a pre-composed banner with icon/message/timestamp * @see StatusBannerTitle - For colored title bar * @see StatusBannerContent - For main content area */ export function StatusBannerContainer({ className, children, status, }: React.ComponentProps<"div"> & { status?: Exclude; }) { return (

{children}

); } StatusBannerContainer.displayName = "StatusBannerContainer"; /** * StatusBannerMessage - Automatic status message display * * Displays a status message that automatically shows the appropriate text based * on the parent StatusBannerContainer's status. Uses CSS data attribute selectors * to show only the relevant message: * - success: "All Systems Operational" * - degraded: "Degraded Performance" * - error: "Partial Outage" * - info: "Maintenance" * * The messages are sourced from systemStatusLabels.long for consistent messaging. * * @example * ```tsx * * * // Displays "All Systems Operational" * * ``` * * @see StatusBannerContainer - For setting the status context * @see systemStatusLabels - For the message text definitions */ export function StatusBannerMessage({ className, ...props }: React.ComponentProps<"div">) { const labels = useStatusBlocksLabels(); return (

{labels.systemStatus.success.long} {labels.systemStatus.degraded.long} {labels.systemStatus.error.long} {labels.systemStatus.info.long}

); } /** * StatusBannerTitle - Colored title bar for banner sections * * Displays a title with a solid status-colored background and light text color. * The background color automatically adjusts based on the parent StatusBannerContainer's * status type: * - success: Green background * - degraded: Yellow background * - error: Red background * - info: Blue background * * Typically used to create distinct sections within a banner or to highlight * important information. * * @example * ```tsx * * Ongoing Incident * *

Details about the incident...

* * * ``` * * @see StatusBannerContainer - For setting the status context * @see StatusBannerContent - For main content below the title */ export function StatusBannerTitle({ className, children, ...props }: React.ComponentProps<"div">) { return (

{children}

); } StatusBannerTitle.displayName = "StatusBannerTitle"; /** * StatusBannerContent - Main content area for banner messages * * Provides consistent padding and spacing (gap-2) for banner content. Used to * display detailed messages, updates, or other information within a status banner. * * The padding is responsive: px-3 py-2 on mobile, px-4 py-3 on larger screens. * * @example * ```tsx * * Scheduled Maintenance * *

We will be performing maintenance on Jan 20 from 2-4 AM UTC.

Some services may be temporarily unavailable.

* * * ``` * * @see StatusBannerContainer - For the container * @see StatusBannerTitle - For optional title bar above content */ export function StatusBannerContent({ className, children, ...props }: React.ComponentProps<"div">) { return (

{children}

); } StatusBannerContent.displayName = "StatusBannerContent"; /** * StatusBannerIcon - Status indicator icon for banner context * * This component wraps the unified StatusIcon with variant="banner", configuring * it to respond to the parent StatusBannerContainer's data-status attribute. * The displayed icon automatically changes based on the status type: * - success: CheckIcon * - degraded: TriangleAlertIcon * - error: AlertCircleIcon * - info: WrenchIcon * * @example * ```tsx * *

* * *

* * ``` * * @see StatusBannerContainer - For setting the status context * @see StatusIcon from status-icon.tsx - For the underlying unified icon implementation */ export function StatusBannerIcon({ className, ...props }: React.ComponentProps<"div">) { return ( ); } StatusBannerIcon.displayName = "StatusBannerIcon"; // ============================================================================ // Tab Components // ============================================================================ /** * StatusBannerTabs - Tab container for multi-section status banners * * Provides a tabbed interface for status banners, allowing multiple views or * sections within a single banner. The tabs container automatically applies * status-based background colors matching the banner theme. * * Built on Radix UI Tabs with status-aware styling. * * @param status - The status type for background color theming * * @example * ```tsx * * * * Impact * * * Updates * * * * *

Services affected by this incident...

* * * * *

Latest updates on resolution...

* * * * ``` * * @see StatusBannerTabsList - For the tab navigation * @see StatusBannerTabsTrigger - For individual tab buttons * @see StatusBannerTabsContent - For tab panel content */ export function StatusBannerTabs({ className, children, status, ...props }: React.ComponentProps & { status?: Exclude; }) { return ( {children} ); } /** * StatusBannerTabsList - Tab navigation container * * Wraps the tab triggers in a scrollable container with rounded top corners. * The container automatically handles overflow with horizontal scrolling on * smaller screens. * * @example * ```tsx * * * Overview * * * Details * * * ``` * * @see StatusBannerTabsTrigger - For individual tab buttons */ export function StatusBannerTabsList({ className, children, ...props }: React.ComponentProps) { return (

{children}

); } /** * StatusBannerTabsTrigger - Individual tab button * * Displays a single tab trigger button with status-based coloring. The button * shows: * - Inactive state: 50% opacity status color background * - Active state: Full status color background with light text * * The status parameter should match the parent StatusBannerTabs status for * consistent theming. * * @param status - The status type for color theming * @param value - The tab value (for Radix UI Tabs) * * @example * ```tsx * * * Affected Services * * * Timeline * * * ``` * * @see StatusBannerTabsList - For the container * @see StatusBannerTabsContent - For the corresponding content panels */ export function StatusBannerTabsTrigger({ className, children, status, ...props }: React.ComponentProps & { status?: Exclude; }) { return ( {children} ); } /** * StatusBannerTabsContent - Tab panel content container * * Wraps the content for a single tab panel. The component includes negative * horizontal margin (-mx-3) to align edge-to-edge with the banner container * when used with StatusBannerContent. * * @param value - The tab value (must match a StatusBannerTabsTrigger value) * * @example * ```tsx * * *

Latest Update

We have identified the issue and are working on a fix...

* * * ``` * * @see StatusBannerTabsTrigger - For the tab button that activates this content * @see StatusBannerContent - Typically used as a child for proper padding */ export function StatusBannerTabsContent({ className, children, ...props }: React.ComponentProps) { return ( {children} ); } 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","https://openstatus.dev/r/status-types.json","https://openstatus.dev/r/status-utils.json","https://openstatus.dev/r/status-timestamp.json","https://openstatus.dev/r/status-i18n.json","tabs"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/blocks/status-banner.tsx","content":"$52","type":"registry:ui","target":"components/blocks/status-banner.tsx"}],"className":"h-[70svh] min-h-80"}]]}]