'use client';

import { Meshball, MeshballChip, MeshballCallout, MeshballStatus } from '@/components/ui/meshball';

export default function MeshballNetwork() {
  return (
    <div className="flex items-center justify-center rounded-2xl bg-zinc-950 p-8">
      <div className="relative flex flex-col items-center gap-6">
        {/* Header */}
        <div className="flex items-center gap-3">
          <MeshballStatus label="Network Online" online />
          <MeshballChip label="Region" value="EU-West" />
        </div>

        <Meshball
          size={440}
          nodeCount={100}
          radius={155}
          rotationSpeed={0.0003}
          connectionThreshold={0.42}
        >
          {/* Left side metrics */}
          <div className="absolute left-0 top-1/2 flex -translate-y-1/2 flex-col gap-2">
            <MeshballCallout metric="98.6%" title="Packet delivery" subtitle="↑ 0.3%" />
            <MeshballCallout metric="12 ms" title="Avg. RTT" subtitle="Within SLA" />
          </div>

          {/* Right side metrics */}
          <div className="absolute right-0 top-1/2 flex -translate-y-1/2 flex-col gap-2">
            <MeshballCallout metric="3.2 Pb" title="Transferred today" subtitle="Peak 14:22 UTC" />
            <MeshballCallout metric="847" title="Active sessions" subtitle="↓ 23 from peak" />
          </div>
        </Meshball>

        {/* Footer chips */}
        <div className="flex items-center gap-2">
          <MeshballChip label="BGP peers" value="128" active />
          <MeshballChip label="Prefixes" value="987k" />
          <MeshballChip label="ASN" value="AS64512" />
        </div>
      </div>
    </div>
  );
}
Meshball Pattern

Default

Minimal

Network

We use cookies
