User Info Glass

1// ========================================
2// USER INFO GLASS - COMPOSITE COMPONENT
3// User name, username, and join date display
4// Level 3: Composite (extracted from ProfileHeaderGlass)
5// ========================================
6 
7import { forwardRef, type HTMLAttributes, type CSSProperties } from 'react';
8import { Calendar, ExternalLink } from 'lucide-react';
9import { cn } from '@/lib/utils';
10import '@/glass-theme.css';
11 
12/**
13 * Props for UserInfoGlass component.
14 *
15 * Extends standard div attributes for maximum flexibility.
16 * All props are readonly to ensure immutability.
17 *
18 * @example
19 * ```tsx
20 * const props: UserInfoGlassProps = {
21 *   name: 'John Doe',
22 *   username: 'johndoe',
23 *   joinDate: 'Jan 2023',
24 *   profileUrl: 'https://github.com/johndoe',
25 *   layout: 'vertical',
26 * };
27 * ```
28 */
29export interface UserInfoGlassProps extends HTMLAttributes<HTMLDivElement> {
30  /**
31   * User's full name.
32   *
33   * Displayed as h1 heading with primary text color.
34   * Responsive font size: lg (mobile) to xl (desktop) in vertical layout.
35   *
36   * @example
37   * ```tsx
38   * <UserInfoGlass name="Jane Smith" />
39   * ```
40   */
41  readonly name: string;
42 
43  /**
44   * Username (without @ prefix).
45   *
46   * Displayed as clickable link with @ prefix and external link icon.
47   * Uses accent color for visual hierarchy.
48   *
49   * @example
50   * ```tsx
51   * <UserInfoGlass username="janesmith" /> // Displays "@janesmith"
52   * ```
53   */
54  readonly username: string;
55 
56  /**
57   * Join date in human-readable format.
58   *
59   * Displayed with calendar icon and "Joined" prefix.
60   * Typically formatted as "MMM YYYY" (e.g., "Jan 2023").
61   *
62   * @example
63   * ```tsx
64   * <UserInfoGlass joinDate="Jan 2023" /> // Shows "📅 Joined Jan 2023"
65   * ```
66   */
67  readonly joinDate: string;
68 
69  /**
70   * URL for the username link.
71   *
72   * Typically points to user profile page.
73   * Includes aria-label for accessibility.
74   *
75   * @default '#'
76   *
77   * @example
78   * ```tsx
79   * <UserInfoGlass profileUrl="https://github.com/johndoe" />
80   * ```
81   */
82  readonly profileUrl?: string;
83 
84  /**
85   * Layout orientation.
86   *
87   * - `vertical`: Name above username/join date (default, mobile-friendly)
88   * - `horizontal`: Name and metadata side-by-side (desktop-optimized)
89   *
90   * @default 'vertical'
91   */
92  readonly layout?: 'vertical' | 'horizontal';
93}
94 
95/**
96 * UserInfoGlass Component
97 *
98 * User name, username, and join date display component.
99// … truncated