Function renderDeps

examples/react/basic/src/package-json-panel.tsx:227–285

(title: string, deps?: Record<string, string>)

  }

  const renderDeps = (title: string, deps?: Record<string, string>) => {
    const names = Object.keys(deps || {})
    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
    const someOutdatedInSection = names.some((n) => !!outdatedDeps[n])
    return (
      <div style={sectionStyle}>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            gap: 6,
          }}
        >
          <h3 style={{ margin: 0, fontSize: 14 }}>{title}</h3>
          {someOutdatedInSection ? <BulkActions names={names} /> : null}
        </div>
        <table style={tableStyle}>
          <thead>
            <tr>
              <th style={thtd}>Package</th>
              <th style={thtd}>Version</th>
              <th style={thtd}>Status</th>
              <th style={thtd}>Actions</th>
            </tr>
          </thead>
          <tbody>
            {Object.entries(deps || {}).map(([dep, version]) => {
              const info = outdatedDeps[dep] as
                | {
                    current: string
                    wanted: string
                    latest: string
                    type?: 'dependencies' | 'devDependencies'
                  }
                | undefined
              const isOutdated = !!info && info.current !== info.latest
              return (
                <tr key={dep}>
                  <td style={thtd}>{dep}</td>
                  <td style={thtd}>
                    <VersionCell dep={dep} specified={version} />
                  </td>
                  <td style={thtd}>
                    {isOutdated
                      ? badge('Outdated', '#e11d48')
                      : badge('OK', '#10b981')}
                  </td>
                  <td style={thtd}>
                    {isOutdated ? <UpgradeRowActions name={dep} /> : null}
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>
    )