| 1 | import { useState } from 'react' |
| 2 | import { Menu } from '../menu.js' |
| 3 | import { DialPeer } from './dial.js' |
| 4 | import { PeerList } from './list.js' |
| 5 | import type { MetricsRPC, Peer } from '@ipshipyard/libp2p-inspector-metrics' |
| 6 | import type { ReactElement } from 'react' |
| 7 | |
| 8 | export interface PeersProps { |
| 9 | peers: Peer[] |
| 10 | metrics: MetricsRPC |
| 11 | } |
| 12 | |
| 13 | export function Peers ({ peers, metrics }: PeersProps): ReactElement { |
| 14 | const [panel, setPanel] = useState('Connected') |
| 15 | |
| 16 | return ( |
| 17 | <> |
| 18 | <Menu onClick={(panel) => { setPanel(panel) }} panel={panel} options={['Connected', 'Dial']} /> |
| 19 | {panel === 'Connected' ? <PeerList peers={peers} metrics={metrics} /> : undefined} |
| 20 | {panel === 'Dial' ? <DialPeer metrics={metrics} /> : undefined} |
| 21 | </> |
| 22 | ) |
| 23 | } |