mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-26 22:34:02 +08:00
feat: dual column for proxies render (#1152)
This commit is contained in:
parent
13b22bee93
commit
96869c96c6
32
src/components/ProxiesRenderWrapper.tsx
Normal file
32
src/components/ProxiesRenderWrapper.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import { createWindowSize } from '@solid-primitives/resize-observer'
|
||||
import { ResolvedJSXElement, type ParentComponent } from 'solid-js'
|
||||
import { renderProxiesInTwoColumns } from '~/signals'
|
||||
|
||||
export const ProxiesRenderWarpper: ParentComponent = (props) => {
|
||||
const windowSize = createWindowSize()
|
||||
const isBiggerScreen = createMemo(() => windowSize.width > 480)
|
||||
|
||||
return () => {
|
||||
const content = children(() => props.children) as () => ResolvedJSXElement[]
|
||||
const filterContent = (target: number) => {
|
||||
return content()
|
||||
?.filter((_: ResolvedJSXElement, index: number) => index % 2 === target)
|
||||
.map((proxy) => {
|
||||
return <div class="mb-2">{proxy}</div>
|
||||
})
|
||||
}
|
||||
|
||||
if (renderProxiesInTwoColumns() && isBiggerScreen()) {
|
||||
return (
|
||||
<div class="flex gap-2">
|
||||
<div class="flex-1">{filterContent(0)}</div>
|
||||
<div class="flex-1">{filterContent(1)}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div class={'grid grid-cols-1 place-items-start gap-2'}>{content()}</div>
|
||||
)
|
||||
}
|
||||
}
|
@ -15,6 +15,7 @@ import {
|
||||
ProxyNodePreview,
|
||||
SubscriptionInfo,
|
||||
} from '~/components'
|
||||
import { ProxiesRenderWarpper } from '~/components/ProxiesRenderWrapper'
|
||||
import {
|
||||
filterProxiesByAvailability,
|
||||
formatProxyType,
|
||||
@ -28,7 +29,6 @@ import {
|
||||
iconHeight,
|
||||
iconMarginRight,
|
||||
proxiesOrderingType,
|
||||
renderProxiesInTwoColumns,
|
||||
useConnections,
|
||||
useProxies,
|
||||
} from '~/signals'
|
||||
@ -175,14 +175,7 @@ export default () => {
|
||||
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<Show when={activeTab() === ActiveTab.proxies}>
|
||||
<div
|
||||
class={twMerge(
|
||||
'grid grid-cols-1 place-items-start gap-2',
|
||||
renderProxiesInTwoColumns()
|
||||
? 'sm:grid-cols-2'
|
||||
: 'sm:grid-cols-1',
|
||||
)}
|
||||
>
|
||||
<ProxiesRenderWarpper>
|
||||
<For each={renderProxies()}>
|
||||
{(proxyGroup) => {
|
||||
const sortedProxyNames = createMemo(() =>
|
||||
@ -236,7 +229,9 @@ export default () => {
|
||||
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<div class="badge badge-primary badge-sm">
|
||||
<span class="font-bold">{formatProxyType(proxyGroup.type)}</span>
|
||||
<span class="font-bold">
|
||||
{formatProxyType(proxyGroup.type)}
|
||||
</span>
|
||||
<Show when={proxyGroup.now?.length > 0}>
|
||||
<span class="whitespace-nowrap">
|
||||
::
|
||||
@ -285,18 +280,11 @@ export default () => {
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</ProxiesRenderWarpper>
|
||||
</Show>
|
||||
|
||||
<Show when={activeTab() === ActiveTab.proxyProviders}>
|
||||
<div
|
||||
class={twMerge(
|
||||
'grid grid-cols-1 place-items-start gap-2',
|
||||
renderProxiesInTwoColumns()
|
||||
? 'sm:grid-cols-2'
|
||||
: 'sm:grid-cols-1',
|
||||
)}
|
||||
>
|
||||
<ProxiesRenderWarpper>
|
||||
<For each={proxyProviders()}>
|
||||
{(proxyProvider) => {
|
||||
const sortedProxyNames = createMemo(() =>
|
||||
@ -390,7 +378,7 @@ export default () => {
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</ProxiesRenderWarpper>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user