bagas/tunnl_please_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Frankfurt coordinates to the map
All checks were successful
Docker Build and Push / build-and-push (push) Successful in 9m36s
Details

Browse Source
This commit is contained in:
bagas
2025-09-06 21:35:57 +07:00
parent 54b0c1f9cf
commit 6967933612
2 changed files with 41 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
components/tunnel-config.tsx
View File

@ -51,6 +51,20 @@ const fetchServers = async (): Promise<Server[]> => {
tcp: false, tcp: false,
}, },
}, },
{
id: "eu",
name: "Europe",
location: "Frankfurt",
subdomain: "eu.tunnl.live",
coordinates: [8.6821, 50.1109],
ping: null,
status: "online",
pingStatus: "idle",
capabilities: {
http: true,
tcp: false,
},
},
{ {
id: "sgp", id: "sgp",
name: "Singapore", name: "Singapore",
@ -646,19 +660,17 @@ export default function TunnelConfig({ config, onConfigChange, selectedServer, o
onServerSelect(server) onServerSelect(server)
} }
}} }}
className={`p-3 rounded-lg border transition-all duration-200 ${ className={`p-3 rounded-lg border transition-all duration-200 ${selectedServer?.id === server.id
selectedServer?.id === server.id
? "bg-emerald-950 border-emerald-500" ? "bg-emerald-950 border-emerald-500"
: !canSelect : !canSelect
? "bg-red-950 border-red-800 cursor-not-allowed opacity-75" ? "bg-red-950 border-red-800 cursor-not-allowed opacity-75"
: "bg-gray-800 border-gray-700 hover:border-gray-600 cursor-pointer" : "bg-gray-800 border-gray-700 hover:border-gray-600 cursor-pointer"
}`} }`}
> >
<div className="flex items-center justify-between mb-1"> <div className="flex items-center justify-between mb-1">
<h5 className="font-medium text-sm">{server.name}</h5> <h5 className="font-medium text-sm">{server.name}</h5>
<div <div
className={`w-2 h-2 rounded-full ${ className={`w-2 h-2 rounded-full ${selectedServer?.id === server.id
selectedServer?.id === server.id
? "bg-emerald-400" ? "bg-emerald-400"
: !canSelect : !canSelect
? "bg-red-400" ? "bg-red-400"
@ -671,7 +683,7 @@ export default function TunnelConfig({ config, onConfigChange, selectedServer, o
? "bg-orange-400" ? "bg-orange-400"
: "bg-red-400" : "bg-red-400"
: "bg-gray-600" : "bg-gray-600"
}`} }`}
/> />
</div> </div>
<p className="text-xs text-gray-400 mb-1">{server.location}</p> <p className="text-xs text-gray-400 mb-1">{server.location}</p>
@ -733,9 +745,8 @@ export default function TunnelConfig({ config, onConfigChange, selectedServer, o
<label className="block text-sm font-medium mb-3">Forwarding Type</label> <label className="block text-sm font-medium mb-3">Forwarding Type</label>
<div className="flex gap-4"> <div className="flex gap-4">
<label <label
className={`flex items-center ${ className={`flex items-center ${servers.some((s) => s.capabilities.http) ? "cursor-pointer" : "cursor-not-allowed opacity-50"
servers.some((s) => s.capabilities.http) ? "cursor-pointer" : "cursor-not-allowed opacity-50" }`}
}`}
> >
<input <input
type="radio" type="radio"
@ -749,22 +760,20 @@ export default function TunnelConfig({ config, onConfigChange, selectedServer, o
className="sr-only" className="sr-only"
/> />
<div <div
className={`flex items-center gap-2 px-4 py-2 rounded-lg border transition-all ${ className={`flex items-center gap-2 px-4 py-2 rounded-lg border transition-all ${localConfig.type === "http"
localConfig.type === "http"
? "bg-emerald-950 border-emerald-500 text-emerald-400" ? "bg-emerald-950 border-emerald-500 text-emerald-400"
: servers.some((s) => s.capabilities.http) : servers.some((s) => s.capabilities.http)
? "bg-gray-800 border-gray-700 text-gray-300 hover:border-gray-600" ? "bg-gray-800 border-gray-700 text-gray-300 hover:border-gray-600"
: "bg-gray-800 border-gray-700 text-gray-500 cursor-not-allowed" : "bg-gray-800 border-gray-700 text-gray-500 cursor-not-allowed"
}`} }`}
> >
<div <div
className={`w-2 h-2 rounded-full ${ className={`w-2 h-2 rounded-full ${localConfig.type === "http"
localConfig.type === "http"
? "bg-emerald-400" ? "bg-emerald-400"
: servers.some((s) => s.capabilities.http) : servers.some((s) => s.capabilities.http)
? "bg-gray-500" ? "bg-gray-500"
: "bg-gray-600" : "bg-gray-600"
}`} }`}
/> />
<span className="font-medium">HTTP/HTTPS</span> <span className="font-medium">HTTP/HTTPS</span>
{!servers.some((s) => s.capabilities.http) && ( {!servers.some((s) => s.capabilities.http) && (
@ -774,9 +783,8 @@ export default function TunnelConfig({ config, onConfigChange, selectedServer, o
</label> </label>
<label <label
className={`flex items-center ${ className={`flex items-center ${servers.some((s) => s.capabilities.tcp) ? "cursor-pointer" : "cursor-not-allowed opacity-50"
servers.some((s) => s.capabilities.tcp) ? "cursor-pointer" : "cursor-not-allowed opacity-50" }`}
}`}
> >
<input <input
type="radio" type="radio"
@ -790,22 +798,20 @@ export default function TunnelConfig({ config, onConfigChange, selectedServer, o
className="sr-only" className="sr-only"
/> />
<div <div
className={`flex items-center gap-2 px-4 py-2 rounded-lg border transition-all ${ className={`flex items-center gap-2 px-4 py-2 rounded-lg border transition-all ${localConfig.type === "tcp"
localConfig.type === "tcp"
? "bg-emerald-950 border-emerald-500 text-emerald-400" ? "bg-emerald-950 border-emerald-500 text-emerald-400"
: servers.some((s) => s.capabilities.tcp) : servers.some((s) => s.capabilities.tcp)
? "bg-gray-800 border-gray-700 text-gray-300 hover:border-gray-600" ? "bg-gray-800 border-gray-700 text-gray-300 hover:border-gray-600"
: "bg-gray-800 border-gray-700 text-gray-500 cursor-not-allowed" : "bg-gray-800 border-gray-700 text-gray-500 cursor-not-allowed"
}`} }`}
> >
<div <div
className={`w-2 h-2 rounded-full ${ className={`w-2 h-2 rounded-full ${localConfig.type === "tcp"
localConfig.type === "tcp"
? "bg-emerald-400" ? "bg-emerald-400"
: servers.some((s) => s.capabilities.tcp) : servers.some((s) => s.capabilities.tcp)
? "bg-gray-500" ? "bg-gray-500"
: "bg-gray-600" : "bg-gray-600"
}`} }`}
/> />
<span className="font-medium">TCP</span> <span className="font-medium">TCP</span>
{!servers.some((s) => s.capabilities.tcp) && ( {!servers.some((s) => s.capabilities.tcp) && (

15
components/world-map.tsx
View File

@ -13,7 +13,7 @@ interface Server {
} }
const servers: Server[] = [ const servers: Server[] = [
{ {
id: "us", id: "us",
name: "United States", name: "United States",
location: "Chicago", location: "Chicago",
@ -21,6 +21,14 @@ const servers: Server[] = [
coordinates: [-87.6298, 41.8781], coordinates: [-87.6298, 41.8781],
ping: null, ping: null,
}, },
{
id: "eu",
name: "Europe",
location: "Frankfurt",
subdomain: "eu.tunnl.live",
coordinates: [8.6821, 50.1109],
ping: null,
},
{ {
id: "sgp", id: "sgp",
name: "Singapore", name: "Singapore",
@ -159,11 +167,10 @@ export default function WorldMap({ onServerSelect, selectedServer }: WorldMapPro
<div <div
key={server.id} key={server.id}
onClick={() => onServerSelect(server)} onClick={() => onServerSelect(server)}
className={`p-4 rounded-lg border cursor-pointer transition-all duration-200 ${ className={`p-4 rounded-lg border cursor-pointer transition-all duration-200 ${selectedServer.id === server.id
selectedServer.id === server.id
? "bg-emerald-950 border-emerald-500" ? "bg-emerald-950 border-emerald-500"
: "bg-gray-900 border-gray-800 hover:border-gray-700" : "bg-gray-900 border-gray-800 hover:border-gray-700"
}`} }`}
> >
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<h4 className="font-bold">{server.name}</h4> <h4 className="font-bold">{server.name}</h4>