Language Bar Glass

1// ========================================
2// LANGUAGE BAR GLASS COMPONENT
3// Language/skill proficiency bar with legend
4// ========================================
5 
6import { forwardRef, useState, type CSSProperties } from 'react';
7import { cn } from '@/lib/utils';
8import '@/glass-theme.css';
9 
10export interface LanguageData {
11  readonly name: string;
12  readonly percent: number;
13  /**
14   * Custom color for the language segment.
15   * Accepts any valid CSS color value:
16   * - OKLCH (recommended): `oklch(66.6% 0.159 303)`
17   * - Hex: `#3b82f6`
18   * - RGB: `rgb(59, 130, 246)`
19   * - HSL: `hsl(221, 83%, 53%)`
20   *
21   * **Note:** CSS variables like `var(--oklch-blue-500)` may not work if they're
22   * tree-shaken out in production builds. Use direct color values instead.
23   *
24   * If not provided, falls back to default language colors defined in `defaultLangColors`.
25   */
26  readonly color?: string;
27}
28 
29export interface LanguageBarGlassProps extends React.HTMLAttributes<HTMLDivElement> {
30  readonly languages: readonly LanguageData[];
31  readonly showLegend?: boolean;
32}
33 
34// CSS variable names for language colors (defined in themes)
35const defaultLangColors: Record<string, string> = {
36  TypeScript: 'var(--language-typescript)',
37  JavaScript: 'var(--language-javascript)',
38  Python: 'var(--language-python)',
39  HTML: 'var(--language-html)',
40  CSS: 'var(--language-css)',
41  Java: 'var(--language-java)',
42  Go: 'var(--language-go)',
43  Rust: 'var(--language-rust)',
44  Ruby: 'var(--language-ruby)',
45  PHP: 'var(--language-php)',
46};
47 
48export const LanguageBarGlass = forwardRef<HTMLDivElement, LanguageBarGlassProps>(
49  ({ languages = [], showLegend = true, className, ...props }, ref) => {
50    const [hoveredLang, setHoveredLang] = useState<number | null>(null);
51 
52    const barStyles: CSSProperties = {
53      boxShadow: 'var(--rainbow-glow)',
54    };
55 
56    // Early return if no languages provided
57    if (!languages || languages.length === 0) {
58      return null;
59    }
60 
61    return (
62      <div ref={ref} className={cn('w-full', className)} {...props}>
63        {/* Progress bar */}
64        <div
65          className="flex h-2 md:h-2.5 rounded-full overflow-hidden"
66          style={barStyles}
67          role="group"
68          aria-label="Language distribution"
69        >
70          {languages.map((lang, i) => {
71            const bgColor = lang.color ?? defaultLangColors[lang.name] ?? 'var(--oklch-slate-400)';
72            const segmentStyles: CSSProperties = {
73// … truncated