import type React from 'react'; import { FiRefreshCw } from 'react-icons/fi'; import JSONPretty from 'react-json-pretty'; import { IconButton } from '@components/generic/button/IconButton'; import { Card } from '@components/generic/Card'; import { CopyButton } from '@components/menu/buttons/CopyButton'; import { Hashicon } from '@emeraldpay/hashicon-react'; import { useAppSelector } from '@hooks/useAppSelector'; export const Info = (): JSX.Element => { const hardwareInfo = useAppSelector( (state) => state.meshtastic.radio.hardware, ); const node = useAppSelector((state) => state.meshtastic.nodes.find( (node) => node.data.num === hardwareInfo.myNodeNum, ), ); return ( <div className="flex h-full flex-col gap-4 p-4 xl:flex-row"> <Card title="Connected Node Details" actions={<IconButton icon={<FiRefreshCw />} />} className="xl:w-3/5" > <div className="m-auto flex flex-col gap-2"> <Hashicon value={hardwareInfo.myNodeNum.toString()} size={180} /> <div className="text-center text-lg font-medium dark:text-white"> {node?.data.user?.longName || 'Unknown'} </div> </div> {/* <img src="https://docs.rakwireless.com/assets/images/wisblock/rak5005-o/overview/RAK5005-O_buy.png" className="-rotate-90" /> */} </Card> <Card title="Debug Information" className="flex-grow" actions={<CopyButton data={JSON.stringify(hardwareInfo)} />} > <JSONPretty className="overflow-y-auto" data={hardwareInfo} /> </Card> </div> ); };