feat: render in two line

src/components/Collpase.tsx

@@ -27,7 +27,7 @@ const Collapse: ParentComponent<Props> = (props) => {
     <div
       class={twMerge(
         getCollapseClassName(),
-        'collapse collapse-arrow overflow-visible border-secondary bg-base-200',
+        'collapse collapse-arrow mb-2 overflow-visible border-secondary bg-base-200',
       )}
     >
       <div

src/components/ForTwoLine.tsx

@@ -0,0 +1,30 @@
+import { JSX, Show, createMemo, createSignal } from 'solid-js'
+
+const [windowWidth, setWindowWidth] = createSignal(0)
+
+setWindowWidth(document?.body?.clientWidth)
+
+window.addEventListener('resize', () => {
+  setWindowWidth(document.body.clientWidth)
+})
+
+const ForTwoLine = (props: { subChild: JSX.Element[] }) => {
+  const isWidder = createMemo(() => windowWidth() >= 640) // 640 is sm size in daisyui
+  const leftLine = createMemo(() =>
+    props.subChild.filter((i, index) => index % 2 === 0 || !isWidder()),
+  )
+  const rightLine = createMemo(() =>
+    props.subChild.filter((i, index) => index % 2 === 1),
+  )
+
+  return (
+    <div class="flex">
+      <div class="flex flex-1 flex-col">{leftLine()}</div>
+      <Show when={isWidder()}>
+        <div class="ml-2 flex flex-1 flex-col">{rightLine()}</div>
+      </Show>
+    </div>
+  )
+}
+
+export default ForTwoLine

src/pages/Proxies.tsx

@@ -1,6 +1,7 @@
 import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
-import { For, Show, createSignal, onMount } from 'solid-js'
+import { Show, createSignal, onMount } from 'solid-js'
 import Collapse from '~/components/Collpase'
+import ForTwoLine from '~/components/ForTwoLine'
 import ProxyCardGroups from '~/components/ProxyCardGroups'
 import ProxyNodeDots from '~/components/ProxyNodeDots'
 import SubscriptionInfo from '~/components/SubscriptionInfo'
@@ -63,9 +64,8 @@ export default () => {
       <div>
         <h1 class="pb-4 text-lg font-semibold">Proxies</h1>
 
-        <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+        <ForTwoLine
-          <For each={proxies()}>
+          subChild={proxies().map((proxy) => {
-            {(proxy) => {
             const title = (
               <>
                 <div class="mr-10 flex items-center justify-between">
@@ -94,13 +94,12 @@ export default () => {
                 proxies={proxy.all!}
                 now={proxy.now}
                 onClick={(name) => {
-                    setProxyGroupByProxyName(proxy, name)
+                  onProxyNodeClick(proxy, name)
                 }}
               />
             )
 
             return (
-                <div>
               <Collapse
                 isOpen={collapsedMap()[`group-${proxy.name}`]}
                 title={title}
@@ -112,19 +111,16 @@ export default () => {
                   })
                 }
               />
-                </div>
             )
-            }}
+          })}
-          </For>
+        />
-        </div>
       </div>
 
       <Show when={proxyProviders().length > 0}>
         <h1 class="pb-4 text-lg font-semibold">Proxy Providers</h1>
 
-        <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+        <ForTwoLine
-          <For each={proxyProviders()}>
+          subChild={proxyProviders().map((proxyProvider) => {
-            {(proxyProvider) => {
             const title = (
               <>
                 <div class="mr-10 flex items-center justify-between">
@@ -140,9 +136,7 @@ export default () => {
                     </button>
                     <button
                       class="btn btn-circle btn-sm"
-                        onClick={(e) =>
+                      onClick={(e) => onHealthCheckClick(e, proxyProvider.name)}
-                          onHealthCheckClick(e, proxyProvider.name)
-                        }
                     >
                       <IconBrandSpeedtest />
                     </button>
@@ -155,9 +149,7 @@ export default () => {
                   {proxyProvider.vehicleType} :: Updated{' '}
                   {formatTimeFromNow(proxyProvider.updatedAt)}
                 </div>
-                  <Show
+                <Show when={!collapsedMap()[`provider-${proxyProvider.name}`]}>
-                    when={!collapsedMap()[`provider-${proxyProvider.name}`]}
-                  >
                   <ProxyNodeDots
                     proxyNameList={
                       proxyProvider.proxies.map((i) => i.name) ?? []
@@ -173,7 +165,6 @@ export default () => {
             )
 
             return (
-                <div>
               <Collapse
                 isOpen={collapsedMap()[`provider-${proxyProvider.name}`]}
                 title={title}
@@ -185,11 +176,9 @@ export default () => {
                   })
                 }
               />
-                </div>
             )
-            }}
+          })}
-          </For>
+        />
-        </div>
       </Show>
     </div>
   )