Flag Alert Glass

1// ========================================
2// FLAG ALERT GLASS COMPONENT
3// Individual warning/danger flag alert
4// ========================================
5 
6import { forwardRef, useState, type CSSProperties } from 'react';
7import { cn } from '@/lib/utils';
8import { StatusIndicatorGlass, type StatusType } from './status-indicator-glass';
9import '@/glass-theme.css';
10 
11export type FlagType = 'warning' | 'danger';
12 
13export interface FlagAlertGlassProps extends React.HTMLAttributes<HTMLDivElement> {
14  readonly type?: FlagType;
15  readonly title: string;
16  readonly description?: string;
17}
18 
19// CSS variable maps for flag types
20const flagVarMap: Record<
21  FlagType,
22  { bg: string; border: string; text: string; statusType: StatusType }
23> = {
24  danger: {
25    bg: 'var(--alert-danger-bg)',
26    border: 'var(--alert-danger-border)',
27    text: 'var(--alert-danger-text)',
28    statusType: 'red',
29  },
30  warning: {
31    bg: 'var(--alert-warning-bg)',
32    border: 'var(--alert-warning-border)',
33    text: 'var(--alert-warning-text)',
34    statusType: 'yellow',
35  },
36};
37 
38export const FlagAlertGlass = forwardRef<HTMLDivElement, FlagAlertGlassProps>(
39  ({ type = 'warning', title, description, className, ...props }, ref) => {
40    const [isHovered, setIsHovered] = useState(false);
41    const config = flagVarMap[type];
42 
43    const alertStyles: CSSProperties = {
44      background: config.bg,
45      borderColor: config.border,
46      transform: isHovered ? 'translateX(4px)' : 'translateX(0)',
47    };
48 
49    return (
50      <div
51        ref={ref}
52        className={cn(
53          'p-2.5 md:p-3 rounded-xl border transition-all duration-300 max-w-md',
54          className
55        )}
56        style={alertStyles}
57        onMouseEnter={() => setIsHovered(true)}
58        onMouseLeave={() => setIsHovered(false)}
59        role="alert"
60        {...props}
61      >
62        <div
63          className="flex items-center gap-1.5 md:gap-2 font-medium text-xs md:text-sm"
64          style={{ color: config.text }}
65        >
66          <StatusIndicatorGlass type={config.statusType} />
67          {title}
68        </div>
69        {description && (
70          <p className="text-(length:--font-size-2xs) md:text-xs mt-0.5 md:mt-1 ml-4 md:ml-5 text-(--text-muted)">
71            {description}
72          </p>
73        )}
74      </div>
75    );
76  }
77);
78 
79FlagAlertGlass.displayName = 'FlagAlertGlass';