Profile Header Extended Glass

1// ========================================
2// PROFILE HEADER EXTENDED GLASS COMPONENT
3// Extended user profile header with GitHub-compatible fields
4// Implements Issue #29 feature request
5// ========================================
6 
7import { forwardRef } from 'react';
8import { Calendar, ExternalLink, FolderGit2, Users, User, MapPin, FileCode2 } from 'lucide-react';
9import { cn } from '@/lib/utils';
10import { GlassCard } from '../ui/glass-card';
11import { ProfileAvatarGlass } from '../specialized/profile-avatar-glass';
12import { LanguageBarGlass, type LanguageData } from '../specialized/language-bar-glass';
13import '@/glass-theme.css';
14 
15export interface ExtendedProfileStats {
16  readonly repos?: number;
17  readonly followers?: number;
18  readonly following?: number;
19  readonly gists?: number;
20}
21 
22export interface ExtendedProfileUser {
23  /** Display name (can be null for users without a name set) */
24  readonly name: string | null;
25  /** Username/handle (e.g., "octocat") */
26  readonly login: string;
27  /** Avatar URL */
28  readonly avatar: string;
29  /** Profile URL */
30  readonly url: string;
31  /** Join date (ISO 8601 string or formatted string) */
32  readonly createdAt: string;
33  /** User biography/description */
34  readonly bio?: string | null;
35  /** User location */
36  readonly location?: string | null;
37  /** Profile stats */
38  readonly stats?: ExtendedProfileStats;
39  /** Programming languages distribution */
40  readonly languages?: readonly LanguageData[];
41}
42 
43export interface ProfileHeaderExtendedGlassProps extends React.HTMLAttributes<HTMLDivElement> {
44  /** User profile data */
45  readonly user: ExtendedProfileUser;
46  /** Whether to show the avatar with online status */
47  readonly showStatus?: boolean;
48  /** Avatar status when showStatus is true */
49  readonly status?: 'online' | 'offline' | 'away' | 'busy';
50  /** Custom action slot (replaces default external link behavior) */
51  readonly actions?: React.ReactNode;
52  /** Removes glass background, renders as plain div */
53  readonly transparent?: boolean;
54}
55 
56/**
57 * Formats ISO 8601 date to human-readable format
58 * @example "2011-01-25T18:44:36Z" -> "January 25, 2011"
59 */
60function formatJoinDate(dateString: string): string {
61  try {
62    const date = new Date(dateString);
63    if (isNaN(date.getTime())) {
64      // If not a valid date, return as-is (might already be formatted)
65      return dateString;
66    }
67    return date.toLocaleDateString('en-US', {
68      month: 'long',
69      day: 'numeric',
70      year: 'numeric',
71    });
72// … truncated