Status Icon

1import type { StatusType } from "@/components/blocks/status.types";
2import { cn } from "@/lib/utils";
3import {
4  AlertCircleIcon,
5  CheckIcon,
6  TriangleAlertIcon,
7  WrenchIcon,
8} from "lucide-react";
9 
10interface StatusIconProps extends React.ComponentProps<"div"> {
11  /**
12   * The status type to display
13   */
14  status?: StatusType;
15  /**
16   * The variant determines the CSS selector pattern used for status-based styling
17   * - "default": Uses group-data-[variant=...] (for Status component)
18   * - "banner": Uses group-data-[status=...]/status-banner (for StatusBanner component)
19   * - "component": Uses group-data-[variant=...]/component (for StatusComponent)
20   */
21  variant?: "default" | "banner" | "component";
22}
23 
24/**
25 * StatusIcon - A unified icon component for displaying status indicators
26 *
27 * This component renders the appropriate icon based on the status type:
28 * - success: CheckIcon
29 * - degraded: TriangleAlertIcon
30 * - error: AlertCircleIcon
31 * - info: WrenchIcon
32 * - empty: No icon (muted background)
33 *
34 * @example
35 * // In Status component context
36 * <StatusIcon variant="default" />
37 *
38 * @example
39 * // In StatusBanner context
40 * <StatusIcon variant="banner" />
41 *
42 * @example
43 * // In StatusComponent context
44 * <StatusIcon variant="component" />
45 */
46export function StatusIcon({
47  className,
48  variant = "default",
49  status,
50  ...props
51}: StatusIconProps) {
52  // Define size classes based on variant
53  const sizeClasses =
54    variant === "component"
55      ? "size-[12.5px] [&>svg]:size-[9px]"
56      : "size-7 [&>svg]:size-4";
57 
58  // Define status-based classes based on variant
59  const statusClasses = (() => {
60    switch (variant) {
61      case "banner":
62        return [
63          "group-data-[status=success]/status-banner:bg-success",
64          "group-data-[status=degraded]/status-banner:bg-warning",
65          "group-data-[status=error]/status-banner:bg-destructive",
66          "group-data-[status=info]/status-banner:bg-info",
67        ];
68      case "component":
69        return [
70          "group-data-[variant=success]/component:bg-success",
71          "group-data-[variant=degraded]/component:bg-warning",
72          "group-data-[variant=error]/component:bg-destructive",
73          "group-data-[variant=info]/component:bg-info",
74        ];
75      case "default":
76      default:
77        return [
78          "group-data-[variant=success]:bg-success",
79          "group-data-[variant=degraded]:bg-warning",
80          "group-data-[variant=error]:bg-destructive",
81// … truncated