piano-midi-monitor/src/renderer/src/components/Activity/index.tsx

import * as React from 'react'
import {DeviceChannelActive} from '../../hooks/midi';

export interface ActivityProps {
  device?: MIDIInput
  currentDeviceActive?: DeviceChannelActive
}

const getDeviceDisplayName = (device?: MIDIInput): string | undefined => {
  if (typeof device === 'undefined') {
    return undefined
  }

  return [device.name, device.version ? `v${device.version}` : null]
    .filter((s) => Boolean(s))
    .join(' ')
}

export const Activity: React.FC<ActivityProps> = ({
  device,
  currentDeviceActive = [
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false
  ]
}) => {
  const deviceDisplayName = getDeviceDisplayName(device)

  return (
    <div>
      <div className="text-xs">
        Input device:{' '}
        {typeof deviceDisplayName === 'undefined' && <span className="opacity-50">(None)</span>}
        {typeof deviceDisplayName !== 'undefined' && deviceDisplayName}
      </div>
      <div className="h-1.5 flex gap-1 items-center">
        <div
          className="rounded-full w-1.5 h-1.5 bg-yellow-400"
          style={{
            opacity: device?.state === 'connected' ? 1 : 0.25
          }}
        />
        {currentDeviceActive.map((a, i) => (
          <div
            className="rounded-full w-1.5 h-1.5 bg-green-400"
            key={i}
            style={{
              opacity: a ? 1 : 0.25
            }}
          />
        ))}
      </div>
    </div>
  )
}