| 124 | ) |
| 125 | |
| 126 | const VersionCell = ({ |
| 127 | dep, |
| 128 | specified, |
| 129 | }: { |
| 130 | dep: string |
| 131 | specified: string |
| 132 | }) => { |
| 133 | const info = outdatedDeps[dep] as |
| 134 | | { |
| 135 | current: string |
| 136 | wanted: string |
| 137 | latest: string |
| 138 | type?: 'dependencies' | 'devDependencies' |
| 139 | } |
| 140 | | undefined |
| 141 | const current = info?.current ?? specified |
| 142 | const latest = info?.latest |
| 143 | const dt = info ? diffType(current, latest) : null |
| 144 | return ( |
| 145 | <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}> |
| 146 | <span>{current}</span> |
| 147 | {dt && latest ? ( |
| 148 | <span |
| 149 | style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }} |
| 150 | > |
| 151 | <span style={{ opacity: 0.6 }}>→</span> |
| 152 | {badge(`latest ${latest}`, diffColor[dt])} |
| 153 | </span> |
| 154 | ) : null} |
| 155 | </div> |
| 156 | ) |
| 157 | } |
| 158 | |
| 159 | const UpgradeRowActions = ({ name }: { name: string }) => { |
| 160 | const info = outdatedDeps[name] as |