50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T183e,"use client"; import { StatusComponentIcon, StatusComponentStatus, } from "@/components/blocks/status-component"; import type { StatusType } from "@/components/blocks/status.types"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; import { cn } from "@/lib/utils"; import { useEffect, useState } from "react"; /** * StatusComponentGroup - Collapsible group for organizing related monitors * * A collapsible container component for grouping related StatusComponent items, * displaying an aggregate status for the group. The component shows: * - Group title * - Aggregate status label (e.g., "Operational", "Degraded") * - Status icon with appropriate color * - Expandable/collapsible content area for grouped monitors * * **Key Features**: * - **Collapsible**: Click to expand/collapse grouped monitors * - **Hydration-Aware Animations**: Prevents layout shift on initial render by delaying * animations until after mount (avoids animation flash when defaultOpen=true) * - **Aggregate Status**: Shows overall status for the entire group * - **Keyboard Accessible**: Full keyboard support via Radix UI Collapsible * - **Hover Effects**: Subtle border and background changes on hover/open * * The component uses a hydration-aware animation pattern: animations are disabled * on the server and first client render, then enabled after mount. This prevents * layout shifts when `defaultOpen={true}` is used. * * @param title - The group name/title * @param status - The aggregate status type for the group (controls icon color and status label) * @param defaultOpen - Whether the group starts expanded (default: false) * @param children - StatusComponent items or other content to display when expanded * * @example * // Basic collapsible group with multiple monitors * ```tsx * * * * * * REST API * * * * * * * * GraphQL API * * * * * ``` * * @example * // Degraded group with mixed statuses * ```tsx * * * * * * Primary DB * * * * * * * * Replica DB * * * * * ``` * * @example * // Multiple groups for different service categories * ```tsx * * * // Core service monitors... * * * // Third-party monitors... * * * // Internal tool monitors... * * * ``` * * @see StatusComponent - For individual monitor displays within the group * @see StatusComponentIcon - For the status icon displayed in the header * @see StatusComponentStatus - For the status label displayed in the header */ export function StatusComponentGroup({ children, title, status, className, defaultOpen = false, ...props }: React.ComponentProps<"div"> & { title: string; status?: Exclude; children?: React.ReactNode; defaultOpen?: boolean; }) { const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); return (

{title}

{children}

); } StatusComponentGroup.displayName = "StatusComponentGroup"; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@openstatus","registryDependencies":["https://openstatus.dev/r/status-component.json","https://openstatus.dev/r/status-types.json","collapsible"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/blocks/status-component-group.tsx","content":"$52","type":"registry:ui","target":"components/blocks/status-component-group.tsx"}],"className":"h-[70svh] min-h-80"}]]}]