Profile Header Glass

1// ========================================
2// PROFILE HEADER GLASS COMPONENT
3// Compound Component API + Legacy API
4// ========================================
5 
6import { createContext, forwardRef, useContext } from 'react';
7import { cn } from '@/lib/utils';
8import {
9  ProfileHeaderExtendedGlass,
10  type ExtendedProfileUser,
11} from './profile-header-extended-glass';
12import { AICardGlass, type AICardGlassProps } from '../composite/ai-card-glass';
13import type { LanguageData } from '../specialized/language-bar-glass';
14import '@/glass-theme.css';
15 
16// ========================================
17// CONTEXT
18// ========================================
19 
20interface ProfileHeaderContextValue {
21  layout: 'horizontal' | 'stacked';
22}
23 
24const ProfileHeaderContext = createContext<ProfileHeaderContextValue | null>(null);
25 
26function useProfileHeaderContext() {
27  const context = useContext(ProfileHeaderContext);
28  if (!context) {
29    throw new Error(
30      'ProfileHeader compound components must be used within ProfileHeaderGlass.Root'
31    );
32  }
33  return context;
34}
35 
36// ========================================
37// COMPOUND COMPONENTS
38// ========================================
39 
40export interface ProfileHeaderRootProps extends React.HTMLAttributes<HTMLDivElement> {
41  /**
42   * Layout mode for the profile header
43   * - 'horizontal': 50/50 split on desktop (default)
44   * - 'stacked': Vertical stack on all breakpoints
45   * @default 'horizontal'
46   */
47  readonly layout?: 'horizontal' | 'stacked';
48}
49 
50/**
51 * ProfileHeaderGlass.Root - Container for compound component API
52 *
53 * @example
54 * ```tsx
55 * <ProfileHeaderGlass.Root layout="horizontal">
56 *   <ProfileHeaderGlass.Profile user={user} />
57 *   <ProfileHeaderGlass.AI onGenerate={handleGenerate} />
58 * </ProfileHeaderGlass.Root>
59 * ```
60 */
61const ProfileHeaderRoot = forwardRef<HTMLDivElement, ProfileHeaderRootProps>(
62  ({ layout = 'horizontal', className, children, ...props }, ref) => {
63    const isHorizontal = layout === 'horizontal';
64 
65    return (
66      <ProfileHeaderContext.Provider value={{ layout }}>
67        <div
68          ref={ref}
69          className={cn(
70            'flex gap-3',
71            isHorizontal ? 'flex-col lg:flex-row lg:gap-0' : 'flex-col',
72            className
73          )}
74          {...props}
75        >
76          {children}
77        </div>
78      </ProfileHeaderContext.Provider>
79    );
80  }
81);
82 
83ProfileHeaderRoot.displayName = 'ProfileHeaderGlass.Root';
84 
85export interface ProfileHeaderProfileProps extends Omit<
86// … truncated