"use client";
import { useStatusBlocksLabels } from "@openstatus/ui/components/blocks/status-i18n";
import { cn } from "@openstatus/ui/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 (
);
}
/**
* 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
*
*
*
);
}
/**
* 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 `