88 lines
2.8 KiB
TypeScript
88 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { Network, Database, Shield, Server, Globe, Lock } from 'lucide-react';
|
|
|
|
const components = [
|
|
{
|
|
name: 'Corestore & Autopass',
|
|
description: 'Decentralized storage and secure writer additions',
|
|
icon: Database,
|
|
position: 'top-left',
|
|
},
|
|
{
|
|
name: 'Hyperswarm',
|
|
description: 'Peer discovery using fixed topic',
|
|
icon: Network,
|
|
position: 'top-center',
|
|
},
|
|
{
|
|
name: 'DNS Handler',
|
|
description: 'UDP server for P2P and public DNS resolution',
|
|
icon: Globe,
|
|
position: 'top-right',
|
|
},
|
|
{
|
|
name: 'Proxy Server',
|
|
description: 'HTTPS/HTTP with WebSocket support',
|
|
icon: Server,
|
|
position: 'bottom-left',
|
|
},
|
|
{
|
|
name: 'Holesail',
|
|
description: 'Secure UDP Holepunched Tunnels',
|
|
icon: Shield,
|
|
position: 'bottom-right',
|
|
},
|
|
{
|
|
name: 'Certificate Authority',
|
|
description: 'Automatic TLS certificate generation and management',
|
|
icon: Lock,
|
|
position: 'bottom-center',
|
|
},
|
|
];
|
|
|
|
export default function ArchitectureDiagram() {
|
|
return (
|
|
<div className="relative 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">
|
|
{components.map((component, index) => {
|
|
const Icon = component.icon;
|
|
return (
|
|
<motion.div
|
|
key={component.name}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
className="bg-white dark:bg-gray-900 p-6 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-500 dark:hover:border-blue-500 transition-colors"
|
|
>
|
|
<div className="flex items-center space-x-3 mb-3">
|
|
<div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
|
|
<Icon className="h-6 w-6 text-blue-600 dark:text-blue-400" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
|
{component.name}
|
|
</h3>
|
|
</div>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
{component.description}
|
|
</p>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<div className="mt-8 text-center">
|
|
<div className="inline-flex items-center space-x-2 px-4 py-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
|
|
<Network className="h-5 w-5 text-blue-600 dark:text-blue-400" />
|
|
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
|
All components work together to create a resilient P2P DNS system
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|