Interactive Card

1/**
2 * InteractiveCard Component
3 *
4 * Unified wrapper for card components with hover animations and glass effects.
5 * Eliminates hover state duplication in MetricCardGlass, YearCardGlass,
6 * AICardGlass, RepositoryCardGlass, and other card components.
7 *
8 * Features:
9 * - Hover lift animation (translateY -2px)
10 * - Optional glow effects
11 * - Glass surface with backdrop blur
12 * - Configurable backgrounds and borders
13 */
14 
15import { forwardRef, type HTMLAttributes, type CSSProperties } from 'react';
16import { cn } from '@/lib/utils';
17import { useHover } from '@/lib/hooks/use-hover';
18 
19/**
20 * Props for the InteractiveCard component
21 */
22export interface InteractiveCardProps extends HTMLAttributes<HTMLDivElement> {
23  /**
24   * Enable hover lift effect (translateY -2px)
25   * @default true
26   */
27  hoverLift?: boolean;
28 
29  /**
30   * CSS variable for hover glow effect
31   * @example 'var(--glow-primary)'
32   */
33  hoverGlow?: string;
34 
35  /**
36   * CSS variable for hover background
37   * @example 'var(--card-hover-bg)'
38   */
39  hoverBg?: string;
40 
41  /**
42   * CSS variable for base background
43   * @default 'var(--card-bg)'
44   */
45  baseBg?: string;
46 
47  /**
48   * CSS variable for border color
49   * @default 'var(--card-border)'
50   */
51  borderColor?: string;
52 
53  /**
54   * CSS variable for hover border color
55   */
56  hoverBorderColor?: string;
57 
58  /**
59   * Blur level for glass effect
60   * @default 'sm'
61   */
62  blur?: 'sm' | 'md' | 'lg' | 'xl';
63 
64  /**
65   * Disable all hover interactions
66   * @default false
67   */
68  disabled?: boolean;
69 
70  /**
71   * Border radius class
72   * @default 'rounded-2xl'
73   */
74  rounded?: 'rounded-xl' | 'rounded-2xl' | 'rounded-3xl';
75 
76  /**
77   * Transition speed
78   * @default 'var(--transition-slow)'
79   */
80  transition?: string;
81}
82 
83/**
84 * InteractiveCard component
85 *
86 * Provides consistent hover animations and glass effects for card components.
87 * Replaces ~80 lines of duplicated hover state management across 4+ components.
88 *
89 * @example
90 * ```tsx
91 * // Basic usage
92 * <InteractiveCard>
93 *   <h3>Card Title</h3>
94 *   <p>Card content</p>
95 * </InteractiveCard>
96 *
97 * // With hover effects
98 * <InteractiveCard
99 *   hoverLift
100 *   hoverGlow="var(--glow-primary)"
101 *   hoverBg="var(--card-hover-bg)"
102 *   hoverBorderColor="var(--card-hover-border)"
103 * >
104 *   <MetricContent />
105 * </InteractiveCard>
106 *
107 * // Custom blur and rounding
108 * <InteractiveCard
109 *   blur="md"
110 *   rounded="rounded-3xl"
111 *   baseBg="var(--metric-success-bg)"
112 * >
113 *   <StatusCard />
114 * </InteractiveCard>
115// … truncated