metacubexd/src/pages/Proxies.tsx

56 lines
1.5 KiB
TypeScript
Raw Normal View History

2023-08-24 04:20:53 +08:00
import { For, createSignal, onMount } from 'solid-js'
import { useRequest } from '~/signals'
import { Proxy, ProxyProvider } from '~/types'
export const Proxies = () => {
const request = useRequest()
const [proxies, setProxies] = createSignal<Proxy[]>([])
const [proxyProviders, setProxyProviders] = createSignal<ProxyProvider[]>([])
onMount(async () => {
const { proxies } = await request
.get('proxies')
.json<{ proxies: Record<string, Proxy> }>()
setProxies(Object.values(proxies))
const { providers } = await request
.get('providers/proxies')
.json<{ providers: Record<string, ProxyProvider> }>()
setProxyProviders(Object.values(providers))
})
return (
2023-08-28 00:51:10 +08:00
<div class="flex flex-col gap-4">
2023-08-24 04:20:53 +08:00
<div>
2023-08-28 00:51:10 +08:00
<h1 class="pb-4 text-lg font-semibold">Proxies</h1>
2023-08-24 04:20:53 +08:00
2023-08-28 00:51:10 +08:00
<div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
2023-08-24 04:20:53 +08:00
<For each={proxies()}>
{(proxy) => (
<div class="card card-bordered card-compact border-secondary p-4">
{proxy.name}
</div>
)}
</For>
</div>
</div>
<div>
2023-08-28 00:51:10 +08:00
<h1 class="pb-4 text-lg font-semibold">Proxy Providers</h1>
2023-08-24 04:20:53 +08:00
2023-08-28 00:51:10 +08:00
<div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
2023-08-24 04:20:53 +08:00
<For each={proxyProviders()}>
{(proxy) => (
<div class="card card-bordered card-compact border-secondary p-4">
{proxy.name}
</div>
)}
</For>
</div>
</div>
</div>
)
}