NodeStatusWidget.tsx raw

   1  import { Link } from "react-router";
   2  import {
   3    Card,
   4    CardContent,
   5    CardHeader,
   6    CardTitle,
   7  } from "src/components/ui/card";
   8  import { useChannels } from "src/hooks/useChannels";
   9  import { usePeers } from "src/hooks/usePeers";
  10  
  11  export function NodeStatusWidget() {
  12    const { data: channels } = useChannels();
  13    const { data: peers } = usePeers();
  14  
  15    if (!channels || !peers) {
  16      return null;
  17    }
  18    return (
  19      <Link to="/channels">
  20        <Card>
  21          <CardHeader>
  22            <CardTitle>Node</CardTitle>
  23          </CardHeader>
  24          <CardContent>
  25            <p className="text-muted-foreground text-xs">Channels Online</p>
  26            <p className="text-xl font-semibold">
  27              {channels.filter((c) => c.active).length || 0} /{" "}
  28              {channels.length || 0}
  29            </p>
  30            <p className="text-muted-foreground text-xs mt-6">Connected Peers</p>
  31            <p className="text-xl font-semibold">
  32              {peers.filter((p) => p.isConnected).length || 0} /{" "}
  33              {peers.length || 0}
  34            </p>
  35          </CardContent>
  36        </Card>
  37      </Link>
  38    );
  39  }
  40