forked from BETAIL-BOYS/TradeFlow-Web
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtest-network-selector.html
More file actions
155 lines (139 loc) · 7.28 KB
/
Copy pathtest-network-selector.html
File metadata and controls
155 lines (139 loc) · 7.28 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NetworkSelector Test</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 text-white p-8">
<div id="root"></div>
<script type="text/babel">
const { useState, useRef, useEffect } = React;
const { ChevronDown, AlertTriangle } = lucide;
function NetworkSelector({ onNetworkChange }) {
const [selectedNetwork, setSelectedNetwork] = useState("mainnet");
const [isOpen, setIsOpen] = useState(false);
const dropdownRef = useRef(null);
const networks = [
{
id: "mainnet",
name: "Stellar Mainnet",
description: "Production network"
},
{
id: "testnet",
name: "Stellar Testnet",
description: "Development network"
}
];
useEffect(() => {
const handleClickOutside = (event) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
setIsOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
const handleNetworkSelect = (network) => {
setSelectedNetwork(network);
setIsOpen(false);
if (onNetworkChange) {
onNetworkChange(network);
}
};
const selectedNetworkData = networks.find(n => n.id === selectedNetwork);
return (
<div className="relative" ref={dropdownRef}>
<button
onClick={() => setIsOpen(!isOpen)}
className="flex items-center gap-2 bg-slate-800 hover:bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 transition-colors min-w-[160px] justify-between"
>
<div className="flex items-center gap-2">
<div className="w-5 h-5 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
<div className="w-2 h-2 bg-white rounded-full"></div>
</div>
<span className="font-medium text-white text-sm">
{selectedNetworkData?.name.replace("Stellar ", "")}
</span>
</div>
<ChevronDown
size={16}
className={`text-slate-400 transition-transform ${isOpen ? "rotate-180" : ""}`}
/>
</button>
{selectedNetwork === "testnet" && (
<div className="absolute -top-2 -right-2 bg-yellow-500 text-slate-900 rounded-full px-2 py-1 text-xs font-bold flex items-center gap-1">
<AlertTriangle size={10} />
Testnet
</div>
)}
{isOpen && (
<div className="absolute top-full right-0 mt-1 bg-slate-800 border border-slate-600 rounded-lg shadow-lg z-50 overflow-hidden min-w-[200px]">
{networks.map((network) => (
<button
key={network.id}
onClick={() => handleNetworkSelect(network.id)}
className={`w-full text-left px-4 py-3 transition-colors ${
network.id === selectedNetwork
? "bg-blue-600/20 text-blue-400"
: "hover:bg-slate-700 text-white"
}`}
>
<div className="flex items-center gap-3">
<div className="w-5 h-5 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center flex-shrink-0">
<div className="w-2 h-2 bg-white rounded-full"></div>
</div>
<div className="flex-1">
<div className="font-medium text-sm">{network.name}</div>
<div className="text-xs text-slate-400">{network.description}</div>
</div>
{network.id === selectedNetwork && (
<div className="w-2 h-2 bg-blue-400 rounded-full"></div>
)}
</div>
</button>
))}
</div>
)}
</div>
);
}
function App() {
const [network, setNetwork] = useState("mainnet");
return (
<div className="space-y-8">
<h1 className="text-2xl font-bold">NetworkSelector Test</h1>
<div className="space-y-4">
<h2 className="text-lg font-semibold">Network Selector Component:</h2>
<NetworkSelector onNetworkChange={setNetwork} />
</div>
<div className="bg-slate-800 p-4 rounded-lg">
<h3 className="text-sm font-medium text-slate-400 mb-2">Current Selection:</h3>
<p className="text-lg font-mono">{network}</p>
</div>
<div className="bg-slate-800 p-4 rounded-lg">
<h3 className="text-sm font-medium text-slate-400 mb-2">Features:</h3>
<ul className="text-sm space-y-1">
<li>✅ Dropdown with Stellar Mainnet and Testnet options</li>
<li>✅ Stellar logo next to network names</li>
<li>✅ React state management for selection</li>
<li>✅ Yellow "Testnet" warning badge when testnet is selected</li>
<li>✅ Click outside to close dropdown</li>
<li>✅ Hover effects and transitions</li>
</ul>
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>