);
}
/**
* StatusEventTitle - Title for status events
*
* Displays the event title in medium-weight font, typically used for incident
* names or maintenance titles.
*
* @example
* ```tsx
* API Gateway Outage
* ```
*/
export function StatusEventTitle({
className,
children,
...props
}: React.ComponentProps<"div">) {
return (
{children}
);
}
/**
* StatusEventTitleCheck - Resolved status indicator with tooltip
*
* Displays a green check icon in a circular badge with a tooltip explaining
* that the report has been resolved. Typically displayed next to event titles.
*
* @example
* ```tsx
*
);
}
// ============================================================================
// Affected Services Components
// ============================================================================
/**
* StatusEventAffected - Container for affected service badges
*
* Displays a wrapping flex container for StatusEventAffectedBadge components,
* showing which services were impacted by an incident.
*
* @example
* ```tsx
*
* API
* Database
* CDN
*
* ```
*/
export function StatusEventAffected({
className,
children,
...props
}: React.ComponentProps<"div">) {
return (
{children}
);
}
/**
* StatusEventAffectedBadge - Badge for individual affected service
*
* Displays a small secondary-style badge representing a single affected service.
* Uses a smaller font size (text-[10px]) for compact display.
*
* @example
* ```tsx
* REST API
* ```
*/
export function StatusEventAffectedBadge({
className,
children,
...props
}: React.ComponentProps<"div">) {
return (
{children}
);
}
// ============================================================================
// Date/Time Components
// ============================================================================
/**
* StatusEventDate - Date display with relative time badge
*
* Displays a formatted date with a relative time badge (e.g., "2 days ago").
* For future dates, the badge is highlighted in info color. The layout is
* responsive: horizontal on mobile (gap-2), vertical on desktop (flex-col).
*
* @param date - The event date to display
*
* @example
* ```tsx
*
* // Displays: "Jan 15, 2024" with "2 days ago" badge
* ```
*/
export function StatusEventDate({
className,
date,
...props
}: React.ComponentProps<"div"> & {
date: Date;
}) {
const labels = useStatusBlocksLabels();
const isFuture = date > new Date();
const distance = formatDistanceStrict(date, new Date(), { addSuffix: true });
return (
{labels.formatDateShort(date)}
{" "}
{distance}
);
}
/**
* StatusEventAside - Sidebar date container (desktop only)
*
* Positions the date to the left of event content on desktop screens (lg breakpoint).
* On mobile, it appears inline. Uses sticky positioning on desktop to keep dates
* visible while scrolling through long events.
*
* @example
* ```tsx
*
*
*
*
*
* // Event content...
*
*
* ```
*/
export function StatusEventAside({
className,
children,
...props
}: React.ComponentProps<"div">) {
return (
{children}
);
}
const impactTextClasses: Record = {
operational: "text-success",
degraded_performance: "text-warning",
partial_outage: "text-warning",
major_outage: "text-destructive",
};
/**
* StatusEventTimelineImpact - Worst impact label for a timeline update
*
* Shows the most severe impact among the update's component changes. The label
* is a hover card trigger listing each component's explicit impact.
*/
export function StatusEventTimelineImpact({
changes,
className,
...props
}: React.ComponentProps<"button"> & {
changes: { name: string; impact: StatusReportImpact }[];
}) {
const labels = useStatusBlocksLabels();
const worst = worstStatusReportImpact(changes.map((c) => c.impact));
return (
);
}
/**
* StatusEventTimelineTitle - Title line for timeline entries
*
* Displays the title line of timeline entries with medium font weight,
* typically containing status label, timestamp, and duration.
*
* @example
* ```tsx
*
* Resolved · Jan 15, 10:30 AM
*
* ```
*/
export function StatusEventTimelineTitle({
className,
children,
asChild,
...props
}: React.ComponentProps<"div"> & { asChild?: boolean }) {
const Comp = asChild ? Slot : "div";
return (
{children}
);
}
/**
* StatusEventTimelineMessage - Message content for timeline entries
*
* Displays the update message in monospace font with muted color and
* consistent padding.
*
* @example
* ```tsx
*
* We have identified the root cause and deployed a fix
*
* ```
*/
export function StatusEventTimelineMessage({
className,
children,
...props
}: React.ComponentProps<"div">) {
return (
{children}
);
}
/**
* StatusEventTimelineDot - Colored status indicator dot
*
* Displays a small circular dot with color based on the parent's data-variant:
* - investigating: Red (destructive)
* - identified: Yellow (warning)
* - monitoring: Blue (info)
* - resolved: Green (success)
* - maintenance: Blue (info)
*
* @example
* ```tsx
*
*
* // Displays green dot
*
* ```
*/
export function StatusEventTimelineDot({
className,
...props
}: React.ComponentProps<"div">) {
return (
);
}
/**
* StatusEventTimelineSeparator - Vertical line connecting timeline entries
*
* Displays a vertical separator line between timeline updates, colored to match
* the status of the update it's connected to. Uses the same color scheme as
* StatusEventTimelineDot.
*
* @example
* ```tsx
*