78 lines
3.5 KiB
TypeScript
78 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { Network, Search, Users } from 'lucide-react';
|
|
|
|
export default function PeerDiscoveryDiagram() {
|
|
return (
|
|
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-8 border border-gray-200 dark:border-gray-700">
|
|
<div className="text-center mb-8">
|
|
<div className="inline-flex items-center space-x-2 px-4 py-2 bg-purple-100 dark:bg-purple-900 rounded-lg mb-4">
|
|
<Search className="h-5 w-5 text-purple-600 dark:text-purple-400" />
|
|
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
|
Topic: sha256(TOPIC_SEED)
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
|
{[
|
|
{ name: 'Peer 1', status: 'Online' },
|
|
{ name: 'Peer 2', status: 'Online' },
|
|
{ name: 'Peer 3', status: 'Online' },
|
|
{ name: 'Peer 4', status: 'Online' },
|
|
].map((peer, index) => (
|
|
<motion.div
|
|
key={peer.name}
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.3, delay: index * 0.1 }}
|
|
className="bg-white dark:bg-gray-900 p-4 rounded-lg border border-gray-200 dark:border-gray-700 text-center"
|
|
>
|
|
<Network className="h-8 w-8 text-blue-600 dark:text-blue-400 mx-auto mb-2" />
|
|
<h4 className="font-semibold text-gray-900 dark:text-white text-sm mb-1">
|
|
{peer.name}
|
|
</h4>
|
|
<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">
|
|
{peer.status}
|
|
</span>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-8 grid md:grid-cols-3 gap-6">
|
|
<div className="bg-white dark:bg-gray-900 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
|
|
<h4 className="font-semibold text-gray-900 dark:text-white mb-2 text-sm">1. Join Topic</h4>
|
|
<p className="text-xs text-gray-600 dark:text-gray-400">
|
|
Peers announce themselves to the DHT using the P2NS topic
|
|
</p>
|
|
</div>
|
|
<div className="bg-white dark:bg-gray-900 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
|
|
<h4 className="font-semibold text-gray-900 dark:text-white mb-2 text-sm">2. Discover Peers</h4>
|
|
<p className="text-xs text-gray-600 dark:text-gray-400">
|
|
Query the DHT to find other peers interested in the same topic
|
|
</p>
|
|
</div>
|
|
<div className="bg-white dark:bg-gray-900 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
|
|
<h4 className="font-semibold text-gray-900 dark:text-white mb-2 text-sm">3. Connect</h4>
|
|
<p className="text-xs text-gray-600 dark:text-gray-400">
|
|
Establish direct connections using UDP hole-punching
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 p-4 bg-purple-50 dark:bg-purple-900 rounded-lg border border-purple-200 dark:border-purple-700">
|
|
<div className="flex items-center space-x-2">
|
|
<Users className="h-5 w-5 text-purple-600 dark:text-purple-400" />
|
|
<p className="text-sm text-purple-800 dark:text-purple-200">
|
|
<strong>Hyperswarm</strong> automatically handles peer churn and reconnection, ensuring the network
|
|
remains connected even as peers join and leave.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|