Status Layout

1import { StatusIcon as UnifiedStatusIcon } from "@/components/blocks/status-icon";
2import { cn } from "@/lib/utils";
3 
4/**
5 * Status - Root container component for status page layouts
6 *
7 * This component serves as the primary container for status page content, providing
8 * consistent spacing and establishing the status type context via data attributes.
9 * The status type controls the visual appearance of child StatusIcon components
10 * through CSS data attribute selectors (group-data-[variant=...]).
11 *
12 * The component acts as both a CSS group and peer for advanced selector patterns,
13 * enabling child components to style themselves based on the parent's status.
14 *
15 * @param variant - The status type that determines the overall status indicator appearance
16 *
17 * @example
18 * ```tsx
19 * <Status variant="success">
20 *   <StatusHeader>
21 *     <StatusBrand src="/logo.png" alt="Company" />
22 *     <StatusTitle>System Status</StatusTitle>
23 *   </StatusHeader>
24 *   <StatusContent>
25 *     {// Status components here}
26 *   </StatusContent>
27 * </Status>
28 * ```
29 *
30 * @see StatusHeader - For header content with brand and title
31 * @see StatusContent - For main status content area
32 * @see StatusIcon - For status indicator icons that respond to variant
33 */
34export function Status({
35  children,
36  className,
37  variant = "success",
38  ...props
39}: React.ComponentProps<"div"> & {
40  variant?: "success" | "degraded" | "error" | "info";
41}) {
42  return (
43    <div
44      data-variant={variant}
45      data-slot="status"
46      className={cn("group peer flex flex-col gap-8", className)}
47      {...props}
48    >
49      {children}
50    </div>
51  );
52}
53Status.displayName = "Status";
54 
55/**
56 * StatusBrand - Brand logo/image component for status page headers
57 *
58 * Displays a brand image (typically a company logo) with consistent sizing.
59 * The default size is 32x32px (size-8), suitable for header placement.
60 *
61 * @param src - Image source URL
62 * @param alt - Alternative text for the image (required for accessibility)
63 *
64 * @example
65 * ```tsx
66 * <StatusHeader>
67 *   <StatusBrand src="/logo.png" alt="Company Name" />
68 *   <StatusTitle>System Status</StatusTitle>
69 * </StatusHeader>
70 * ```
71 *
72 * @see StatusHeader - For positioning brand within header layout
73 */
74export function StatusBrand({
75  src,
76  alt,
77  className,
78  ...props
79}: React.ComponentProps<"img">) {
80  return (
81    <img src={src} alt={alt} className={cn("size-8", className)} {...props} />
82  );
83}
84StatusBrand.displayName = "StatusBrand";
85 
86/**
87// … truncated