50: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"] 51:T430f,"use client"; import { useStatusBlocksLabels } from "@/components/blocks/status-i18n"; import { cn } from "@/lib/utils"; // ============================================================================ // Container Components // ============================================================================ /** * StatusBlankContainer - Main container for empty state displays * * Provides a centered, bordered container with muted background for displaying * empty state content. The container is responsive with adaptive padding * (sm:px-8 sm:py-6) and uses flexbox for vertical centering of content. * * @example * ```tsx * * No Data Available * Add monitors to see data here * * ``` * * @see StatusBlankTitle - For heading text * @see StatusBlankDescription - For descriptive text */ export function StatusBlankContainer({ children, className, ...props }: React.ComponentProps<"div">) { return (

{children}

); } // ============================================================================ // Text Components // ============================================================================ /** * StatusBlankTitle - Title text for empty state displays * * Displays medium-weight title text within empty state containers. * Typically used to communicate the empty state condition. * * @example * ```tsx * No monitors found * ``` * * @see StatusBlankDescription - For additional descriptive text */ export function StatusBlankTitle({ children, className, ...props }: React.ComponentProps<"div">) { return (

{children}

); } /** * StatusBlankDescription - Descriptive text for empty state displays * * Displays muted, monospaced text providing additional context or guidance * for the empty state. The monospace font helps distinguish it as secondary * instructional text. * * @example * ```tsx * * Add monitors to this page to see their status here * * ``` * * @see StatusBlankTitle - For primary heading text */ export function StatusBlankDescription({ children, className, ...props }: React.ComponentProps<"div">) { return (

{children}

); } /** * StatusBlankContent - Content wrapper for empty state text * * Provides vertical spacing (space-y-1) for stacking title and description * components within an empty state display. * * @example * ```tsx * * No Events * No events to display * * ``` */ export function StatusBlankContent({ children, className, ...props }: React.ComponentProps<"div">) { return (

{children}

); } // ============================================================================ // Visualization Components // ============================================================================ /** * StatusBlankReport - Visual representation of an empty incident report * * Displays a stylized preview of an incident report page with placeholder * header, report updates, and an overlay gradient. Used to visualize what * incident reports will look like when created. * * This component is typically rendered in multiple layers with different * scales and opacities to create a stacked card effect. * * @example * ```tsx *

* * *

* ``` * * @see StatusBlankEvents - For composed empty state with stacked reports * @see StatusBlankPageHeader - For the header visualization * @see StatusBlankReportUpdate - For the update line visualizations */ export function StatusBlankReport({ ...props }: React.ComponentProps<"div">) { return (

); } /** * StatusBlankMonitor - Visual representation of an empty monitor display * * Displays a stylized preview of a monitor page with placeholder header and * uptime visualization bars. Used to show what monitor displays will look like * when monitors are added. * * This component is typically rendered in multiple layers with different * scales and opacities to create a stacked card effect. * * @example * ```tsx *

* * *

* ``` * * @see StatusBlankMonitors - For composed empty state with stacked monitors * @see StatusBlankPageHeader - For the header visualization * @see StatusBlankMonitorUptime - For the uptime bar visualization */ export function StatusBlankMonitor({ ...props }: React.ComponentProps<"div">) { return ( ); } // ============================================================================ // Animation Components (for visualization internals) // ============================================================================ /** * StatusBlankPage - Base container for blank page visualizations * * Provides a card-like container with border and background for page previews. * This component is used as the foundation for StatusBlankReport and * StatusBlankMonitor visualizations, providing consistent sizing and styling. * * The container uses relative positioning to enable absolutely positioned * overlay gradients within the visualization. * * @example * ```tsx * * *

// Content here

* * * ``` * * @see StatusBlankReport - For report visualization using this container * @see StatusBlankMonitor - For monitor visualization using this container */ export function StatusBlankPage({ className, children, ...props }: React.ComponentProps<"div">) { return (

{children}

); } /** * StatusBlankPageHeader - Placeholder header for page visualizations * * Displays a stylized representation of a page header with placeholder elements * for logo, navigation items, and actions. Uses accent-colored rounded rectangles * to create a recognizable header pattern. * * The header shows: * - Left: Single square (logo placeholder) * - Center: Three rectangles (navigation items) * - Right: Single rectangle (action button) * * @example * ```tsx * * * // Other visualization content * * ``` */ export function StatusBlankPageHeader({ className, ...props }: React.ComponentProps<"div">) { return (

); } /** * StatusBlankMonitorUptime - Uptime visualization for monitor previews * * Displays a stylized uptime chart with placeholder labels and 30 vertical bars * representing uptime data. Some bars have varying heights to create a realistic * visualization pattern showing occasional incidents. * * The visualization includes: * - Top: Three placeholder labels for time periods * - Bottom: 30 vertical bars with most at full height and some shorter to indicate incidents * * @example * ```tsx * * * * * ``` */ export function StatusBlankMonitorUptime({ className, ...props }: React.ComponentProps<"div">) { return (

{Array.from({ length: 30 }).map((_, index) => (

))}

); } /** * StatusBlankReportUpdate - Single update entry for report visualizations * * Displays a stylized representation of an incident report update with placeholder * elements for status indicator, timestamp, and message lines. Creates a timeline-like * appearance when stacked vertically. * * The update shows: * - Left: Square status indicator * - Right: Two label placeholders (status + timestamp) and two message lines * * @example * ```tsx * * *

* * *

* * ``` */ export function StatusBlankReportUpdate({ className, ...props }: React.ComponentProps<"div">) { return (

); } /** * StatusBlankOverlay - Gradient overlay for page visualizations * * Provides a bottom-to-top gradient overlay that fades the visualization content * from transparent (top 40%) to background color (bottom), creating a subtle * depth effect. The overlay is absolutely positioned to cover the entire parent. * * This overlay helps create visual separation between the preview visualization * and any content that might be displayed on top of it (like call-to-action text). * * @example * ```tsx * * * * * * ``` */ export function StatusBlankOverlay({ children, className, ...props }: React.ComponentProps<"div">) { return (

{children}

); } // ============================================================================ // Composed Empty States // ============================================================================ /** * StatusBlankEvents - Complete empty state for incident reports * * Displays a fully composed empty state with stacked StatusBlankReport * visualizations (three layers with varying scales and opacities) and * customizable title/description text. This creates an engaging empty state * that shows users what incident reports will look like. * * The visualization uses absolute positioning to create a layered card stack * effect with the front card at full opacity and back cards progressively * faded and scaled down. * * @param title - The empty state heading (defaults to `labels.noReports` from the i18n provider) * @param description - The empty state description (defaults to `labels.noReportsDescription` from the i18n provider) * * @example * ```tsx * * ``` * * @see StatusBlankReport - For the underlying report visualization */ export function StatusBlankEvents({ title, description, action, ...props }: React.ComponentProps & { title?: string; description?: string; action?: React.ReactNode; }) { const labels = useStatusBlocksLabels(); return (

{title ?? labels.noReports} {description ?? labels.noReportsDescription} {action} ); } /** * StatusBlankMonitors - Complete empty state for monitors * * Displays a fully composed empty state with stacked StatusBlankMonitor * visualizations (three layers with varying scales and opacities) and * customizable title/description text. This creates an engaging empty state * that shows users what monitor displays will look like. * * The visualization uses absolute positioning to create a layered card stack * effect with the front card at full opacity and back cards progressively * faded and scaled down. * * @param title - The empty state heading (defaults to `labels.noPublicMonitors` from the i18n provider) * @param description - The empty state description (defaults to `labels.noPublicMonitorsDescription` from the i18n provider) * * @example * ```tsx * * ``` * * @see StatusBlankMonitor - For the underlying monitor visualization */ export function StatusBlankMonitors({ title, description, action, ...props }: React.ComponentProps & { title?: string; description?: string; action?: React.ReactNode; }) { const labels = useStatusBlocksLabels(); return (

{title ?? labels.noPublicMonitors} {description ?? labels.noPublicMonitorsDescription} {action} ); } /** * StatusBlankAction - Styled wrapper for empty-state CTAs. * * Applies border + hover chrome around any actionable child (link, button). * Pass a bare `` or `