Segmented Control Glass

1// ========================================
2// SEGMENTED CONTROL GLASS COMPONENT
3// ========================================
4 
5import { forwardRef, type CSSProperties } from 'react';
6import { cn } from '@/lib/utils';
7import '@/glass-theme.css';
8 
9export interface SegmentOption {
10  readonly value: string;
11  readonly label: string;
12}
13 
14export interface SegmentedControlGlassProps extends Omit<
15  React.HTMLAttributes<HTMLDivElement>,
16  'onChange'
17> {
18  readonly options: readonly SegmentOption[];
19  readonly value: string;
20  readonly onChange?: (value: string) => void;
21}
22 
23export const SegmentedControlGlass = forwardRef<HTMLDivElement, SegmentedControlGlassProps>(
24  ({ options = [], value, onChange, className, ...props }, ref) => {
25    const containerStyles: CSSProperties = {
26      border: '1px solid var(--segmented-container-border)',
27      background: 'var(--segmented-container-bg)',
28    };
29 
30    // Early return if no options provided
31    if (!options || options.length === 0) {
32      return null;
33    }
34 
35    return (
36      <div
37        ref={ref}
38        className={cn('inline-flex w-fit rounded-xl overflow-hidden', className)}
39        style={containerStyles}
40        role="tablist"
41        {...props}
42      >
43        {options.map((opt) => {
44          const isActive = value === opt.value;
45          const buttonStyles: CSSProperties = {
46            background: isActive ? 'var(--segmented-active-bg)' : 'transparent',
47            color: isActive ? 'var(--segmented-active-text)' : 'var(--segmented-inactive-text)',
48          };
49 
50          return (
51            <button
52              key={opt.value}
53              onClick={() => onChange?.(opt.value)}
54              className="flex-1 px-3 py-1.5 md:px-4 md:py-2 text-xs md:text-sm font-medium text-center transition-all duration-300"
55              style={buttonStyles}
56              type="button"
57              role="tab"
58              aria-selected={isActive}
59            >
60              {opt.label}
61            </button>
62          );
63        })}
64      </div>
65    );
66  }
67);
68 
69SegmentedControlGlass.displayName = 'SegmentedControlGlass';