| 1 | import { Button } from '@ipshipyard/libp2p-inspector-ui' |
| 2 | import { FaPlug, FaPlugCircleExclamation } from 'react-icons/fa6' |
| 3 | import type { InspectTarget, InspectTargetStatus } from '../../ipc/index.ts' |
| 4 | import type { JSX } from 'react' |
| 5 | import './node.css' |
| 6 | |
| 7 | export interface NodePanelProps { |
| 8 | targets: InspectTarget[] |
| 9 | onDisconnect(evt: React.UIEvent): void |
| 10 | } |
| 11 | |
| 12 | function getIcon (status: InspectTargetStatus): JSX.Element { |
| 13 | if (status === 'connected') { |
| 14 | return <FaPlug /> |
| 15 | } |
| 16 | |
| 17 | return <FaPlugCircleExclamation /> |
| 18 | } |
| 19 | |
| 20 | export const NodePanel = ({ targets, onDisconnect }: NodePanelProps): JSX.Element => { |
| 21 | const target = targets.find(target => target.status === 'connected') |
| 22 | |
| 23 | if (target == null) { |
| 24 | throw new Error('No connected target found') |
| 25 | } |
| 26 | |
| 27 | return ( |
| 28 | <> |
| 29 | <div className='NodePanel'> |
| 30 | <p>{getIcon(target.status)} {target.userAgent} <Button onClick={onDisconnect}>Disconnect</Button></p> |
| 31 | </div> |
| 32 | </> |
| 33 | ) |
| 34 | } |