Repository Metadata Glass

1// ========================================
2// REPOSITORY METADATA GLASS - COMPOSITE COMPONENT
3// Repository languages, commits, and contribution info
4// Level 3: Composite (extracted from RepositoryCardGlass)
5// ========================================
6 
7import { forwardRef, type HTMLAttributes, type CSSProperties } from 'react';
8import { cn } from '@/lib/utils';
9import '@/glass-theme.css';
10 
11export interface RepositoryMetadataGlassProps extends HTMLAttributes<HTMLDivElement> {
12  /** Programming languages used */
13  readonly languages: string;
14  /** Number of commits */
15  readonly commits: number;
16  /** Contribution percentage */
17  readonly contribution: number;
18  /** Stacked layout for mobile */
19  readonly stacked?: boolean;
20}
21 
22export const RepositoryMetadataGlass = forwardRef<
23  HTMLDivElement,
24  RepositoryMetadataGlassProps
25>(
26  (
27    {
28      languages,
29      commits,
30      contribution,
31      stacked = false,
32      className,
33      ...props
34    },
35    ref
36  ) => {
37    const mutedStyles: CSSProperties = {
38      color: 'var(--text-muted)',
39    };
40 
41    const secondaryStyles: CSSProperties = {
42      color: 'var(--text-secondary)',
43    };
44 
45    return (
46      <div
47        ref={ref}
48        className={cn(stacked ? 'space-y-0.5' : 'space-y-1', className)}
49        {...props}
50      >
51        <div className="text-xs" style={mutedStyles}>
52          {languages}
53        </div>
54        <div className="text-xs" style={secondaryStyles}>
55          {commits.toLocaleString()} commits · {contribution}%
56        </div>
57      </div>
58    );
59  }
60);
61 
62RepositoryMetadataGlass.displayName = 'RepositoryMetadataGlass';