make this as html traffic flow diagram,

convert this to react diagram.


```mermaid
graph
Internet[Internet]

subgraph "Production VPC - 15.0.0.0/16"
IGW_Prod[Internet Gateway<br/>igw-09cf4bcb7239a6547]
LB_Prod[Internal Load Balancer<br/>ieq-prod-lb]

subgraph "us-east-1a"
PubSub1[Public Subnet<br/>15.0.0.0/20]
EC2Prod1[BE Prod<br/>3.220.214.17<br/>t2.small]
EC2Prod2[BE Admin Prod<br/>3.227.125.175<br/>t2.small]
EC2ML_Prod[ML Prod<br/>98.83.117.30<br/>t2.medium]
end

subgraph "us-east-1b"
PubSub2[Public Subnet<br/>15.0.16.0/20]
end

Internet --> IGW_Prod
IGW_Prod --> PubSub1
IGW_Prod --> PubSub2
PubSub1 --> EC2Prod1
PubSub1 --> EC2Prod2
PubSub1 --> EC2ML_Prod
LB_Prod --> EC2Prod1
end
```
```mermaid
graph TB


Internet[Internet]

subgraph "Default VPC - 172.31.0.0/16 (Dev & PreProd)"
IGW_Default[Internet Gateway<br/>igw-08f0068d5deb99f34]

subgraph "Development Environment"
DevBE[BE Dev<br/>23.22.6.48<br/>t2.small]
DevAdmin[BE Admin Dev<br/>34.225.40.84<br/>t2.micro]
DevML[ML Dev<br/>54.225.50.5<br/>t2.medium]
DevAV[AV Processing<br/>54.224.121.98<br/>t2.small]
end

subgraph "PreProduction Environment"
PreBE[BE PreProd<br/>44.214.177.246<br/>t2.small]
PreAdmin[BE Admin PreProd<br/>34.193.219.91<br/>t2.small]
PreML[ML PreProd<br/>18.234.27.117<br/>c5.2xlarge]
PreMCP[MCP PreProd<br/>44.204.54.3<br/>t2.medium]
end

LB_Dev[ALB: ieq-be-dev<br/>ieq-be-admin-dev-lb]
LB_MCP[Internal ALB<br/>ieq-mcp-stage-lb]

Internet --> IGW_Default
IGW_Default --> DevBE
IGW_Default --> DevAdmin
IGW_Default --> DevML
IGW_Default --> DevAV
IGW_Default --> PreBE
IGW_Default --> PreAdmin
IGW_Default --> PreML
IGW_Default --> PreMCP

LB_Dev --> DevBE
LB_Dev --> DevAdmin
LB_MCP --> PreMCP
end


```

script.js

@@ -1,277 +1,194 @@
 x
 const { useState, useEffect } = React;
 
+const FlowNode = ({ id, title, details, type, position, onClick }) => {
+    const getNodeClass = (type) => {
+        switch (type) {
+            case 'internet':
+                return 'internet-node';
+            case 'igw':
+                return 'igw-node';
+            case 'subnet':
+                return 'subnet-node';
+            case 'ec2':
+                return 'ec2-node';
+            case 'lb':
+                return 'lb-node';
+            default:
+                return 'default-node';
+        }
+    };
+
+    return (
+        <div 
+            className={`flow-node ${getNodeClass(type)}`}
+            style={{ left: position.x, top: position.y }}
+            onClick={() => onClick && onClick({ id, title, details, type })}
+        >
+            <div className="node-title">{title}</div>
+            {details && <div className="node-details">{details}</div>}
+        </div>
+    );
+};
+
+const FlowArrow = ({ from, to }) => {
+    const deltaX = to.x - from.x;
+    const deltaY = to.y - from.y;
+    const length = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+    const angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;
+    
+    return (
+        <div 
+            className="flow-arrow"
+            style={{
+                left: from.x,
+                top: from.y,
+                width: length,
+                transform: `rotate(${angle}deg)`,
+                transformOrigin: '0 0'
+            }}
+        />
+    );
+};
+
 const VPCDiagram = () => {
     const [selectedComponent, setSelectedComponent] = useState(null);
 
-    const productionComponents = [
-        {
-            id: 'igw-prod',
-            type: 'Internet Gateway',
-            name: 'Internet Gateway',
-            details: 'igw-09cf4bcb7239a6547',
-            icon: 'globe'
-        },
-        {
-            id: 'lb-prod',
-            type: 'Load Balancer',
-            name: 'Internal Load Balancer',
-            details: 'ieq-prod-lb',
-            icon: 'layers'
-        },
-        {
-            id: 'ec2-prod-1',
-            type: 'EC2 Instance',
-            name: 'BE Prod',
-            details: '3.220.214.17 - t2.small',
-            icon: 'server'
-        },
-        {
-            id: 'ec2-prod-2',
-            type: 'EC2 Instance',
-            name: 'BE Admin Prod',
-            details: '3.227.125.175 - t2.small',
-            icon: 'server'
-        },
-        {
-            id: 'ec2-ml-prod',
-            type: 'EC2 Instance',
-            name: 'ML Prod',
-            details: '98.83.117.30 - t2.medium',
-            icon: 'cpu'
-        }
-    ];
+    // Production VPC flow configuration
+    const prodFlow = {
+        internet: { id: 'prod-internet', title: 'Internet', type: 'internet', position: { x: 50, y: 100 } },
+        igw: { id: 'prod-igw', title: 'Internet Gateway', details: 'igw-09cf4bcb7239a6547', type: 'igw', position: { x: 300, y: 100 } },
+        pubsub1: { id: 'prod-pubsub1', title: 'Public Subnet', details: '15.0.0.0/20\nus-east-1a', type: 'subnet', position: { x: 550, y: 50 } },
+        pubsub2: { id: 'prod-pubsub2', title: 'Public Subnet', details: '15.0.16.0/20\nus-east-1b', type: 'subnet', position: { x: 550, y: 150 } },
+        ec2prod1: { id: 'prod-ec2-1', title: 'BE Prod', details: '3.220.214.17\nt2.small', type: 'ec2', position: { x: 800, y: 20 } },
+        ec2prod2: { id: 'prod-ec2-2', title: 'BE Admin Prod', details: '3.227.125.175\nt2.small', type: 'ec2', position: { x: 800, y: 80 } },
+        ec2ml: { id: 'prod-ec2-ml', title: 'ML Prod', details: '98.83.117.30\nt2.medium', type: 'ec2', position: { x: 800, y: 140 } },
+        lbprod: { id: 'prod-lb', title: 'Internal Load Balancer', details: 'ieq-prod-lb', type: 'lb', position: { x: 1050, y: 80 } }
+    };
 
-    const developmentComponents = [
-        {
-            id: 'dev-be',
-            type: 'EC2 Instance',
-            name: 'BE Dev',
-            details: '23.22.6.48 - t2.small',
-            icon: 'server'
-        },
-        {
-            id: 'dev-admin',
-            type: 'EC2 Instance',
-            name: 'BE Admin Dev',
-            details: '34.225.40.84 - t2.micro',
-            icon: 'server'
-        },
-        {
-            id: 'dev-ml',
-            type: 'EC2 Instance',
-            name: 'ML Dev',
-            details: '54.225.50.5 - t2.medium',
-            icon: 'cpu'
-        },
-        {
-            id: 'dev-av',
-            type: 'EC2 Instance',
-            name: 'AV Processing',
-            details: '54.224.121.98 - t2.small',
-            icon: 'shield'
-        },
-        {
-            id: 'lb-dev',
-            type: 'Load Balancer',
-            name: 'ALB Dev',
-            details: 'ieq-be-dev',
-            icon: 'layers'
-        }
-    ];
+    // Default VPC flow configuration
+    const defaultFlow = {
+        internet: { id: 'def-internet', title: 'Internet', type: 'internet', position: { x: 50, y: 400 } },
+        igw: { id: 'def-igw', title: 'Internet Gateway', details: 'igw-08f0068d5deb99f34', type: 'igw', position: { x: 300, y: 400 } },
+        
+        // Development Environment
+        devbe: { id: 'dev-be', title: 'BE Dev', details: '23.22.6.48\nt2.small', type: 'ec2', position: { x: 600, y: 320 } },
+        devadmin: { id: 'dev-admin', title: 'BE Admin Dev', details: '34.225.40.84\nt2.micro', type: 'ec2', position: { x: 600, y: 370 } },
+        devml: { id: 'dev-ml', title: 'ML Dev', details: '54.225.50.5\nt2.medium', type: 'ec2', position: { x: 600, y: 420 } },
+        devav: { id: 'dev-av', title: 'AV Processing', details: '54.224.121.98\nt2.small', type: 'ec2', position: { x: 600, y: 470 } },
+        
+        // PreProduction Environment
+        prebe: { id: 'pre-be', title: 'BE PreProd', details: '44.214.177.246\nt2.small', type: 'ec2', position: { x: 900, y: 320 } },
+        preadmin: { id: 'pre-admin', title: 'BE Admin PreProd', details: '34.193.219.91\nt2.small', type: 'ec2', position: { x: 900, y: 370 } },
+        preml: { id: 'pre-ml', title: 'ML PreProd', details: '18.234.27.117\nc5.2xlarge', type: 'ec2', position: { x: 900, y: 420 } },
+        premcp: { id: 'pre-mcp', title: 'MCP PreProd', details: '44.204.54.3\nt2.medium', type: 'ec2', position: { x: 900, y: 470 } },
+        
+        // Load Balancers
+        lbdev: { id: 'dev-lb', title: 'ALB Dev', details: 'ieq-be-dev\nieq-be-admin-dev-lb', type: 'lb', position: { x: 1200, y: 345 } },
+        lbmcp: { id: 'pre-lb', title: 'Internal ALB', details: 'ieq-mcp-stage-lb', type: 'lb', position: { x: 1200, y: 445 } }
+    };
 
-    const preproductionComponents = [
-        {
-            id: 'pre-be',
-            type: 'EC2 Instance',
-            name: 'BE PreProd',
-            details: '44.214.177.246 - t2.small',
-            icon: 'server'
-        },
-        {
-            id: 'pre-admin',
-            type: 'EC2 Instance',
-            name: 'BE Admin PreProd',
-            details: '34.193.219.91 - t2.small',
-            icon: 'server'
-        },
-        {
-            id: 'pre-ml',
-            type: 'EC2 Instance',
-            name: 'ML PreProd',
-            details: '18.234.27.117 - c5.2xlarge',
-            icon: 'cpu'
-        },
-        {
-            id: 'pre-mcp',
-            type: 'EC2 Instance',
-            name: 'MCP PreProd',
-            details: '44.204.54.3 - t2.medium',
-            icon: 'zap'
-        },
-        {
-            id: 'lb-mcp',
-            type: 'Load Balancer',
-            name: 'Internal ALB',
-            details: 'ieq-mcp-stage-lb',
-            icon: 'layers'
-        }
+    // Production connections
+    const prodConnections = [
+        { from: 'prod-internet', to: 'prod-igw' },
+        { from: 'prod-igw', to: 'prod-pubsub1' },
+        { from: 'prod-igw', to: 'prod-pubsub2' },
+        { from: 'prod-pubsub1', to: 'prod-ec2-1' },
+        { from: 'prod-pubsub1', to: 'prod-ec2-2' },
+        { from: 'prod-pubsub1', to: 'prod-ec2-ml' },
+        { from: 'prod-lb', to: 'prod-ec2-1' }
     ];
 
-    const ComponentCard = ({ component, onClick }) => {
-        const getComponentClass = (type) => {
-            switch (type) {
-                case 'Internet Gateway':
-                    return 'internet-gateway';
-                case 'Load Balancer':
-                    return 'load-balancer';
-                case 'EC2 Instance':
-                    return 'ec2-instance';
-                default:
-                    return '';
-            }
-        };
+    // Default VPC connections
+    const defaultConnections = [
+        { from: 'def-internet', to: 'def-igw' },
+        { from: 'def-igw', to: 'dev-be' },
+        { from: 'def-igw', to: 'dev-admin' },
+        { from: 'def-igw', to: 'dev-ml' },
+        { from: 'def-igw', to: 'dev-av' },
+        { from: 'def-igw', to: 'pre-be' },
+        { from: 'def-igw', to: 'pre-admin' },
+        { from: 'def-igw', to: 'pre-ml' },
+        { from: 'def-igw', to: 'pre-mcp' },
+        { from: 'dev-lb', to: 'dev-be' },
+        { from: 'dev-lb', to: 'dev-admin' },
+        { from: 'pre-lb', to: 'pre-mcp' }
+    ];
 
-        return (
-            <div 
-                className={`component ${getComponentClass(component.type)}`}
-                onClick={() => onClick(component)}
-            >
-                <i data-feather={component.icon} className="component-icon"></i>
-                <div className="component-title">{component.name}</div>
-                <div className="component-details">{component.details}</div>
+    const VPCSection = ({ title, vpc, flow, connections }) => (
+        <div className="vpc-flow-section">
+            <div className="vpc-flow-header">
+                <h2>{title}</h2>
             </div>
-        );
-    };
-
-    const ConnectionFlow = () => (
-        <div className="connections">
-            <h3>Connection Flow</h3>
-            <div className="connection-flow">
-                <div className="connection-item">
-                    <i data-feather="globe"></i> Internet
-                </div>
-                <div className="arrow">→</div>
-                <div className="connection-item">
-                    <i data-feather="shield"></i> Internet Gateway
-                </div>
-                <div className="arrow">→</div>
-                <div className="connection-item">
-                    <i data-feather="layers"></i> Load Balancer
-                </div>
-                <div className="arrow">→</div>
-                <div className="connection-item">
-                    <i data-feather="server"></i> EC2 Instances
-                </div>
+            <div className="flow-diagram">
+                {connections.map((conn, index) => (
+                    <FlowArrow
+                        key={index}
+                        from={flow[conn.from].position}
+                        to={flow[conn.to].position}
+                    />
+                ))}
+                {Object.values(flow).map((node) => (
+                    <FlowNode
+                        key={node.id}
+                        id={node.id}
+                        title={node.title}
+                        details={node.details}
+                        type={node.type}
+                        position={node.position}
+                        onClick={setSelectedComponent}
+                    />
+                ))}
             </div>
         </div>
     );
 
-    const Stats = () => (
-        <div className="stats">
-            <h3>Infrastructure Overview</h3>
-            <div className="stats-grid">
-                <div className="stat-item">
-                    <div className="stat-number">2</div>
-                    <div className="stat-label">VPCs</div>
-                </div>
-                <div className="stat-item">
-                    <div className="stat-number">13</div>
-                    <div className="stat-label">EC2 Instances</div>
-                </div>
-                <div className="stat-item">
-                    <div className="stat-number">4</div>
-                    <div className="stat-label">Load Balancers</div>
-                </div>
-                <div className="stat-item">
-                    <div className="stat-number">2</div>
-                    <div className="stat-label">Internet Gateways</div>
+    const ComponentDetails = () => {
+        if (!selectedComponent) return null;
+        
+        return (
+            <div className="component-details-overlay" onClick={() => setSelectedComponent(null)}>
+                <div className="component-details-panel" onClick={(e) => e.stopPropagation()}>
+                    <h3>{selectedComponent.title}</h3>
+                    {selectedComponent.details && <p>{selectedComponent.details}</p>}
+                    <p>Type: {selectedComponent.type}</p>
+                    <button onClick={() => setSelectedComponent(null)}>Close</button>
                 </div>
             </div>
-        </div>
-    );
+        );
+    };
 
     useEffect(() => {
         feather.replace();
     }, []);
 
-    const handleComponentClick = (component) => {
-        setSelectedComponent(component);
-    };
-
     return (
         <div className="container">
             <div className="header">
-                <h1>AWS VPC Architecture Diagram</h1>
-                <p>Interactive visualization of Production and Development VPC infrastructure</p>
+                <h1>AWS VPC Traffic Flow Diagram</h1>
+                <p>Interactive visualization of Production and Development VPC traffic patterns</p>
             </div>
             
             <div className="diagram-container">
-                {/* Production VPC */}
-                <div className="vpc-section">
-                    <div className="vpc-header">
-                        <h2>Production VPC</h2>
-                        <p>15.0.0.0/16</p>
-                    </div>
-                    
-                    <div className="environments-grid">
-                        <div className="environment">
-                            <h3>Production Environment</h3>
-                            <div className="components-grid">
-                                {productionComponents.map(component => (
-                                    <ComponentCard 
-                                        key={component.id} 
-                                        component={component} 
-                                        onClick={handleComponentClick}
-                                    />
-                                ))}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                {/* Development VPC */}
-                <div className="vpc-section">
-                    <div className="vpc-header">
-                        <h2>Default VPC</h2>
-                        <p>172.31.0.0/16 (Dev & PreProd)</p>
-                    </div>
-                    
-                    <div className="environments-grid">
-                        <div className="environment">
-                            <h3>Development Environment</h3>
-                            <div className="components-grid">
-                                {developmentComponents.map(component => (
-                                    <ComponentCard 
-                                        key={component.id} 
-                                        component={component} 
-                                        onClick={handleComponentClick}
-                                    />
-                                ))}
-                            </div>
-                        </div>
-                        
-                        <div className="environment">
-                            <h3>PreProduction Environment</h3>
-                            <div className="components-grid">
-                                {preproductionComponents.map(component => (
-                                    <ComponentCard 
-                                        key={component.id} 
-                                        component={component} 
-                                        onClick={handleComponentClick}
-                                    />
-                                ))}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <ConnectionFlow />
-                <Stats />
+                <VPCSection 
+                    title="Production VPC - 15.0.0.0/16"
+                    vpc="production"
+                    flow={prodFlow}
+                    connections={prodConnections}
+                />
+                
+                <VPCSection 
+                    title="Default VPC - 172.31.0.0/16 (Dev & PreProd)"
+                    vpc="default"
+                    flow={defaultFlow}
+                    connections={defaultConnections}
+                />
             </div>
+            
+            <ComponentDetails />
         </div>
     );
 };
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<VPCDiagram />);
+root.render(<VPCDiagram />);