Status Component

1"use client";
2 
3import { useStatusBlocksLabels } from "@/components/blocks/status-i18n";
4import { StatusIcon as UnifiedStatusIcon } from "@/components/blocks/status-icon";
5import type {
6  StatusBarData,
7  StatusType,
8} from "@/components/blocks/status.types";
9import { Skeleton } from "@/components/ui/skeleton";
10import {
11  Tooltip,
12  TooltipContent,
13  TooltipProvider,
14  TooltipTrigger,
15} from "@/components/ui/tooltip";
16import { useMediaQuery } from "@/hooks/use-media-query";
17import { cn } from "@/lib/utils";
18import { formatDistanceToNowStrict, subDays } from "date-fns";
19import { ArrowUpRight, InfoIcon } from "lucide-react";
20import { useState } from "react";
21 
22// ============================================================================
23// Layout Components
24// ============================================================================
25 
26interface StatusComponentProps extends React.ComponentProps<"div"> {
27  variant: Exclude<StatusType, "empty">;
28}
29 
30/**
31 * StatusComponent - Root container for individual monitor/service status displays
32 *
33 * This component serves as the main container for displaying a single monitor or
34 * service status. It establishes the status type context via data-variant attribute,
35 * which child components (like StatusComponentIcon and StatusComponentStatus) use
36 * to display the appropriate colors and icons.
37 *
38 * The component acts as a CSS group (/component) for advanced selector patterns,
39 * enabling child components to style themselves based on the parent's variant.
40 *
41 * @param variant - The status type (success, degraded, error, or info)
42 *
43 * @example
44 * ```tsx
45 * <StatusComponent variant="success">
46 *   <StatusComponentHeader>
47 *     <StatusComponentHeaderLeft>
48 *       <StatusComponentIcon />
49 *       <StatusComponentTitle>API Server</StatusComponentTitle>
50 *       <StatusComponentDescription>Main API endpoint</StatusComponentDescription>
51 *     </StatusComponentHeaderLeft>
52 *     <StatusComponentHeaderRight>
53 *       <StatusComponentUptime>99.9%</StatusComponentUptime>
54 *       <StatusComponentStatus />
55 *     </StatusComponentHeaderRight>
56 *   </StatusComponentHeader>
57 *   <StatusComponentBody>
58 *     <StatusBar data={uptimeData} />
59 *   </StatusComponentBody>
60 * </StatusComponent>
61 * ```
62 *
63 * @see StatusComponentHeader - For header layout
64 * @see StatusComponentBody - For content area
65 * @see StatusComponentIcon - For status indicator icon
66 * @see StatusComponentStatus - For status label
67 */
68// … truncated