| 1 | import { useState } from 'react' |
| 2 | import { Menu } from '../menu.js' |
| 3 | import { FindPeer } from './find-peer.js' |
| 4 | import { FindProviders } from './find-providers.js' |
| 5 | import { GetClosestPeers } from './get-closest-peers.js' |
| 6 | import { Get } from './get.js' |
| 7 | import { Provide } from './provide.js' |
| 8 | import { Put } from './put.js' |
| 9 | import type { MetricsRPC } from '@ipshipyard/libp2p-inspector-metrics' |
| 10 | import type { JSX } from 'react' |
| 11 | |
| 12 | export interface PeersProps { |
| 13 | metrics: MetricsRPC |
| 14 | } |
| 15 | |
| 16 | export function Routing ({ metrics }: PeersProps): JSX.Element { |
| 17 | const [panel, setPanel] = useState('Get') |
| 18 | |
| 19 | return ( |
| 20 | <> |
| 21 | <Menu onClick={(panel) => setPanel(panel)} panel={panel} options={['Get', 'Put', 'Find Providers', 'Provide', 'Find Peer', 'Get Closest Peers']} /> |
| 22 | {panel === 'Get' ? <Get metrics={metrics} /> : undefined} |
| 23 | {panel === 'Put' ? <Put metrics={metrics} /> : undefined} |
| 24 | {panel === 'Find Providers' ? <FindProviders metrics={metrics} /> : undefined} |
| 25 | {panel === 'Provide' ? <Provide metrics={metrics} /> : undefined} |
| 26 | {panel === 'Find Peer' ? <FindPeer metrics={metrics} /> : undefined} |
| 27 | {panel === 'Get Closest Peers' ? <GetClosestPeers metrics={metrics} /> : undefined} |
| 28 | </> |
| 29 | ) |
| 30 | } |