All files / web/src/app/create/worksheets/components/config-panel SubOption.tsx

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { css } from '@styled/css'

export interface SubOptionProps {
  checked: boolean
  onChange: (checked: boolean) => void
  label: string
  parentEnabled: boolean
}

/**
 * Reusable sub-option component for nested toggles
 * Used for options like "Show for all problems" under "Ten-Frames"
 */
export function SubOption({ checked, onChange, label, parentEnabled }: SubOptionProps) {
  return (
    <div
      className={css({
        display: 'flex',
        gap: '3',
        alignItems: 'center',
        justifyContent: 'space-between',
        pt: '1.5',
        pb: '2.5',
        px: '3',
        mt: '2',
        borderTop: '1px solid',
        borderColor: 'brand.300',
        opacity: parentEnabled ? 1 : 0,
        visibility: parentEnabled ? 'visible' : 'hidden',
        pointerEvents: parentEnabled ? 'auto' : 'none',
        transition: 'opacity 0.15s',
        cursor: 'pointer',
      })}
      onClick={(e) => {
        e.stopPropagation()
        onChange(!checked)
      }}
    >
      <label
        className={css({
          fontSize: '2xs',
          fontWeight: 'medium',
          color: 'brand.700',
          cursor: 'pointer',
          flex: 1,
        })}
      >
        {label}
      </label>
      <div
        className={css({
          w: '7',
          h: '4',
          bg: checked ? 'brand.500' : 'gray.300',
          rounded: 'full',
          position: 'relative',
          transition: 'background-color 0.15s',
          flexShrink: 0,
        })}
      >
        <div
          style={{
            position: 'absolute',
            top: '0.125rem',
            left: checked ? '0.875rem' : '0.125rem',
            width: '0.75rem',
            height: '0.75rem',
            background: 'white',
            borderRadius: '9999px',
            transition: 'left 0.15s',
            boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
          }}
        />
      </div>
    </div>
  )
}