Status Indicator Glass

1// ========================================
2// STATUS INDICATOR GLASS COMPONENT
3// Status dots with glow effect
4// ========================================
5 
6import { forwardRef, type CSSProperties } from "react";
7import { cn } from "@/lib/utils";
8import "@/glass-theme.css";
9 
10export type StatusType = "green" | "yellow" | "red";
11export type StatusSize = "normal" | "large";
12 
13export interface StatusIndicatorGlassProps extends React.HTMLAttributes<HTMLDivElement> {
14  readonly type?: StatusType;
15  readonly size?: StatusSize;
16}
17 
18const sizeClasses: Record<StatusSize, string> = {
19  normal: "w-2 h-2 md:w-2.5 md:h-2.5",
20  large: "w-3.5 h-3.5 md:w-4 md:h-4",
21};
22 
23const statusSymbols: Record<StatusType, string> = {
24  green: "✓",
25  yellow: "!",
26  red: "✕",
27};
28 
29// CSS variable maps for status colors (using semantic naming)
30const statusVarMap: Record<StatusType, { bg: string; glow: string }> = {
31  green: { bg: "var(--status-online)", glow: "var(--status-online-glow)" },
32  yellow: { bg: "var(--status-away)", glow: "var(--status-away-glow)" },
33  red: { bg: "var(--status-busy)", glow: "var(--status-busy-glow)" },
34};
35 
36export const StatusIndicatorGlass = forwardRef<HTMLDivElement, StatusIndicatorGlassProps>(
37  ({ type = "green", size = "normal", className, ...props }, ref) => {
38    const colors = statusVarMap[type];
39 
40    const indicatorStyles: CSSProperties = {
41      backgroundColor: colors.bg,
42      boxShadow: colors.glow,
43    };
44 
45    return (
46      <div
47        ref={ref}
48        className={cn(
49          "rounded-full flex items-center justify-center",
50          sizeClasses[size],
51          className
52        )}
53        style={indicatorStyles}
54        role="status"
55        aria-label={`Status: ${type}`}
56        {...props}
57      >
58        {size === "large" && (
59          <span className="text-white text-[8px] md:text-[10px] font-bold">
60            {statusSymbols[type]}
61          </span>
62        )}
63      </div>
64    );
65  }
66);
67 
68StatusIndicatorGlass.displayName = "StatusIndicatorGlass";