config-panel OperatorIcon.tsx

0% Statements 0/49

0% Branches 0/1

0% Functions 0/1

0% Lines 0/49

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { css, cx } from '@styled/css'

export interface OperatorIconProps {
  operator: 'addition' | 'subtraction' | 'mixed'
  size?: 'sm' | 'md' | 'lg' | 'xl'
  isDark?: boolean
  color?: 'gray' | 'green'
  className?: string
}

const sizeMap = {
  sm: '2xs',
  md: 'xs',
  lg: 'sm',
  xl: 'xl',
} as const

function getOperatorSymbol(operator: 'addition' | 'subtraction' | 'mixed'): string {
  if (operator === 'mixed') return '±'
  if (operator === 'subtraction') return '−'
  return '+'
}

export function OperatorIcon({
  operator,
  size = 'xl',
  isDark = false,
  color = 'gray',
  className,
}: OperatorIconProps) {
  const colorValue =
    color === 'green' ? (isDark ? 'green.400' : 'green.600') : isDark ? 'gray.300' : 'gray.700'

  return (
    <span
      className={cx(
        css({
          fontSize: sizeMap[size],
          fontWeight: 'bold',
          color: colorValue,
          flexShrink: 0,
        }),
        className
      )}
    >
      {getOperatorSymbol(operator)}
    </span>
  )
}