93 lines
3.8 KiB
TypeScript
93 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { Network, Server, ArrowRight, ArrowLeft } from 'lucide-react';
|
|
|
|
export default function UDPHolePunchingDiagram() {
|
|
return (
|
|
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-8 border border-gray-200 dark:border-gray-700">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
|
|
{/* Peer A */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
className="text-center"
|
|
>
|
|
<div className="bg-blue-100 dark:bg-blue-900 p-6 rounded-lg mb-4">
|
|
<Network className="h-12 w-12 text-blue-600 dark:text-blue-400 mx-auto mb-2" />
|
|
<h3 className="font-semibold text-gray-900 dark:text-white">Peer A</h3>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">Behind NAT</p>
|
|
</div>
|
|
<div className="text-sm text-gray-600 dark:text-gray-400">
|
|
<p>Private IP: 192.168.1.10</p>
|
|
<p>Public: 203.0.113.1:5000</p>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Rendezvous Server */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: 0.2 }}
|
|
className="text-center"
|
|
>
|
|
<div className="bg-purple-100 dark:bg-purple-900 p-6 rounded-lg mb-4">
|
|
<Server className="h-12 w-12 text-purple-600 dark:text-purple-400 mx-auto mb-2" />
|
|
<h3 className="font-semibold text-gray-900 dark:text-white">Rendezvous</h3>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">Server</p>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-center space-x-2 text-sm">
|
|
<ArrowRight className="h-4 w-4 text-green-500" />
|
|
<span className="text-gray-600 dark:text-gray-400">Exchange info</span>
|
|
</div>
|
|
<div className="flex items-center justify-center space-x-2 text-sm">
|
|
<ArrowLeft className="h-4 w-4 text-green-500" />
|
|
<span className="text-gray-600 dark:text-gray-400">Coordinate</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Peer B */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: 0.4 }}
|
|
className="text-center"
|
|
>
|
|
<div className="bg-green-100 dark:bg-green-900 p-6 rounded-lg mb-4">
|
|
<Network className="h-12 w-12 text-green-600 dark:text-green-400 mx-auto mb-2" />
|
|
<h3 className="font-semibold text-gray-900 dark:text-white">Peer B</h3>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">Behind NAT</p>
|
|
</div>
|
|
<div className="text-sm text-gray-600 dark:text-gray-400">
|
|
<p>Private IP: 10.0.0.5</p>
|
|
<p>Public: 198.51.100.2:6000</p>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
<div className="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
|
<div className="text-center">
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: 0.6 }}
|
|
className="inline-flex items-center space-x-2 px-4 py-2 bg-green-100 dark:bg-green-900 rounded-lg"
|
|
>
|
|
<ArrowRight className="h-5 w-5 text-green-600 dark:text-green-400" />
|
|
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
|
After hole-punching, peers connect directly
|
|
</span>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|