Status Component Group

1"use client";
2 
3import {
4  StatusComponentIcon,
5  StatusComponentStatus,
6} from "@/components/blocks/status-component";
7import type { StatusType } from "@/components/blocks/status.types";
8import {
9  Collapsible,
10  CollapsibleContent,
11  CollapsibleTrigger,
12} from "@/components/ui/collapsible";
13import { cn } from "@/lib/utils";
14import { useEffect, useState } from "react";
15 
16/**
17 * StatusComponentGroup - Collapsible group for organizing related monitors
18 *
19 * A collapsible container component for grouping related StatusComponent items,
20 * displaying an aggregate status for the group. The component shows:
21 * - Group title
22 * - Aggregate status label (e.g., "Operational", "Degraded")
23 * - Status icon with appropriate color
24 * - Expandable/collapsible content area for grouped monitors
25 *
26 * **Key Features**:
27 * - **Collapsible**: Click to expand/collapse grouped monitors
28 * - **Hydration-Aware Animations**: Prevents layout shift on initial render by delaying
29 *   animations until after mount (avoids animation flash when defaultOpen=true)
30 * - **Aggregate Status**: Shows overall status for the entire group
31 * - **Keyboard Accessible**: Full keyboard support via Radix UI Collapsible
32 * - **Hover Effects**: Subtle border and background changes on hover/open
33 *
34 * The component uses a hydration-aware animation pattern: animations are disabled
35 * on the server and first client render, then enabled after mount. This prevents
36 * layout shifts when `defaultOpen={true}` is used.
37 *
38 * @param title - The group name/title
39 * @param status - The aggregate status type for the group (controls icon color and status label)
40 * @param defaultOpen - Whether the group starts expanded (default: false)
41 * @param children - StatusComponent items or other content to display when expanded
42 *
43 * @example
44 * // Basic collapsible group with multiple monitors
45 * ```tsx
46 * <StatusComponentGroup
47 *   title="API Services"
48 *   status="success"
49 *   defaultOpen={false}
50 * >
51 *   <StatusComponent variant="success">
52 *     <StatusComponentHeader>
53 *       <StatusComponentHeaderLeft>
54 *         <StatusComponentIcon />
55 *         <StatusComponentTitle>REST API</StatusComponentTitle>
56 *       </StatusComponentHeaderLeft>
57 *     </StatusComponentHeader>
58 *   </StatusComponent>
59 *   <StatusComponent variant="success">
60 *     <StatusComponentHeader>
61 *       <StatusComponentHeaderLeft>
62 *         <StatusComponentIcon />
63 *         <StatusComponentTitle>GraphQL API</StatusComponentTitle>
64// … truncated