83 lines
3.5 KiB
TypeScript
83 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { Router, Globe, Shield } from 'lucide-react';
|
|
|
|
export default function NATTraversalDiagram() {
|
|
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-6">
|
|
{/* Local Network */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
className="bg-white dark:bg-gray-900 p-6 rounded-lg border border-gray-200 dark:border-gray-700"
|
|
>
|
|
<div className="flex items-center space-x-2 mb-4">
|
|
<Router className="h-6 w-6 text-blue-600 dark:text-blue-400" />
|
|
<h3 className="font-semibold text-gray-900 dark:text-white">Local Network</h3>
|
|
</div>
|
|
<ul className="space-y-2 text-sm text-gray-600 dark:text-gray-400">
|
|
<li>• Device 1: 192.168.1.10</li>
|
|
<li>• Device 2: 192.168.1.11</li>
|
|
<li>• Device 3: 192.168.1.12</li>
|
|
</ul>
|
|
</motion.div>
|
|
|
|
{/* NAT Device */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: 0.2 }}
|
|
className="bg-white dark:bg-gray-900 p-6 rounded-lg border border-gray-200 dark:border-gray-700"
|
|
>
|
|
<div className="flex items-center space-x-2 mb-4">
|
|
<Shield className="h-6 w-6 text-purple-600 dark:text-purple-400" />
|
|
<h3 className="font-semibold text-gray-900 dark:text-white">NAT Router</h3>
|
|
</div>
|
|
<div className="text-sm text-gray-600 dark:text-gray-400 space-y-2">
|
|
<p><strong>Public IP:</strong> 203.0.113.1</p>
|
|
<p><strong>Function:</strong></p>
|
|
<ul className="list-disc pl-4 space-y-1">
|
|
<li>Maps private IPs to public ports</li>
|
|
<li>Maintains connection state</li>
|
|
<li>Blocks unsolicited incoming traffic</li>
|
|
</ul>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Internet */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: 0.4 }}
|
|
className="bg-white dark:bg-gray-900 p-6 rounded-lg border border-gray-200 dark:border-gray-700"
|
|
>
|
|
<div className="flex items-center space-x-2 mb-4">
|
|
<Globe className="h-6 w-6 text-green-600 dark:text-green-400" />
|
|
<h3 className="font-semibold text-gray-900 dark:text-white">Internet</h3>
|
|
</div>
|
|
<div className="text-sm text-gray-600 dark:text-gray-400 space-y-2">
|
|
<p><strong>Challenge:</strong></p>
|
|
<ul className="list-disc pl-4 space-y-1">
|
|
<li>Devices behind NAT can't receive direct connections</li>
|
|
<li>UDP hole-punching creates temporary openings</li>
|
|
<li>CGNAT adds additional complexity</li>
|
|
</ul>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
<div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900 rounded-lg border border-blue-200 dark:border-blue-700">
|
|
<p className="text-sm text-blue-800 dark:text-blue-200">
|
|
<strong>P2NS Solution:</strong> Holesail uses advanced UDP hole-punching techniques to establish connections even through multiple layers of NAT and CGNAT.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|