Status Events

1"use client";
2 
3import { useStatusBlocksLabels } from "@/components/blocks/status-i18n";
4import { StatusTimestamp } from "@/components/blocks/status-timestamp";
5import type {
6  StatusReportImpact,
7  StatusReportUpdate,
8} from "@/components/blocks/status.types";
9import { worstStatusReportImpact } from "@/components/blocks/status.utils";
10import { Badge } from "@/components/ui/badge";
11import {
12  HoverCard,
13  HoverCardContent,
14  HoverCardTrigger,
15} from "@/components/ui/hover-card";
16import { Separator } from "@/components/ui/separator";
17import {
18  Tooltip,
19  TooltipContent,
20  TooltipProvider,
21  TooltipTrigger,
22} from "@/components/ui/tooltip";
23import { cn } from "@/lib/utils";
24import { Slot } from "@radix-ui/react-slot";
25import { formatDistanceStrict } from "date-fns";
26import { Check } from "lucide-react";
27 
28// ============================================================================
29// Container Components
30// ============================================================================
31 
32/**
33 * StatusEventGroup - Root container for status events and incident reports
34 *
35 * Provides a vertical flex container with consistent spacing (gap-4) for
36 * displaying a feed of status events, incident reports, and maintenance notices.
37 * The component includes ARIA role="feed" for accessibility.
38 *
39 * @example
40 * ```tsx
41 * <StatusEventGroup>
42 *   <StatusEvent>
43 *     // First incident...
44 *   </StatusEvent>
45 *   <StatusEvent>
46 *     // Second incident...
47 *   </StatusEvent>
48 * </StatusEventGroup>
49 * ```
50 *
51 * @see StatusEvent - For individual event items
52 */
53export function StatusEventGroup({
54  className,
55  children,
56  ...props
57}: React.ComponentProps<"div">) {
58  return (
59    <div
60      data-slot="status-event-group"
61      className={cn("flex flex-col gap-4", className)}
62      role="feed"
63      aria-label="Status events and updates"
64      {...props}
65    >
66      {children}
67    </div>
68  );
69}
70 
71/**
72 * StatusEvent - Individual event container within StatusEventGroup
73 *
74 * Container for a single event (incident, report, or maintenance) with relative
75 * positioning to support absolutely positioned date aside elements.
76 *
77 * @example
78 * ```tsx
79 * <StatusEvent>
80 *   <StatusEventAside>
81 *     <StatusEventDate date={new Date()} />
82 *   </StatusEventAside>
83 *   <StatusEventContent>
84 *     <StatusEventTitle>API Outage</StatusEventTitle>
85 *     // Event details...
86 *   </StatusEventContent>
87 * </StatusEvent>
88 * ```
89 */
90export function StatusEvent({
91  className,
92  children,
93  ...props
94// … truncated