From 6d242a44579522c65e086a5c5c89824329643c0b Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Sat, 16 Sep 2023 01:28:58 +0800
Subject: [PATCH] fix: proxy providers grid layout

---
 src/components/Collapse.tsx |  7 +++----
 src/pages/Proxies.tsx       | 24 +++++++++++-------------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/components/Collapse.tsx b/src/components/Collapse.tsx
index 6cd5bd4..3d149b5 100644
--- a/src/components/Collapse.tsx
+++ b/src/components/Collapse.tsx
@@ -1,15 +1,14 @@
-import { JSX, ParentComponent, Show } from 'solid-js'
+import { children, JSX, ParentComponent, Show } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
 
 type Props = {
   title: JSX.Element
-  content: JSX.Element
   isOpen?: boolean
   onCollapse: (collapsed: boolean) => void
 }
 
 export const Collapse: ParentComponent<Props> = (props) => {
-  const { title, content, onCollapse } = props
+  const { title, onCollapse } = props
 
   const getCollapseClassName = () => {
     const openedClassName = 'collapse-open'
@@ -44,7 +43,7 @@ export const Collapse: ParentComponent<Props> = (props) => {
           'collapse-content grid grid-cols-2 gap-2 transition-opacity duration-1000',
         )}
       >
-        <Show when={props.isOpen}>{content}</Show>
+        <Show when={props.isOpen}>{children(() => props.children)()}</Show>
       </div>
     </div>
   )
diff --git a/src/pages/Proxies.tsx b/src/pages/Proxies.tsx
index 6f669b6..446897d 100644
--- a/src/pages/Proxies.tsx
+++ b/src/pages/Proxies.tsx
@@ -203,17 +203,14 @@ export default () => {
                   <Collapse
                     isOpen={collapsedMap()[proxy.name]}
                     title={title}
-                    content={
-                      <ProxyCardGroups
-                        proxyNames={sortedProxyNames}
-                        now={proxy.now}
-                        onClick={(name) => {
-                          void onProxyNodeClick(proxy, name)
-                        }}
-                      />
-                    }
                     onCollapse={(val) => setCollapsedMap(proxy.name, val)}
-                  />
+                  >
+                    <ProxyCardGroups
+                      proxyNames={sortedProxyNames}
+                      now={proxy.now}
+                      onClick={(name) => void onProxyNodeClick(proxy, name)}
+                    />
+                  </Collapse>
                 )
               }}
             </For>
@@ -221,7 +218,7 @@ export default () => {
         </Show>
 
         <Show when={activeTab() === ActiveTab.proxyProviders}>
-          <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+          <div class="grid grid-cols-1 place-items-start gap-2 sm:grid-cols-2">
             <For each={proxyProviders()}>
               {(proxyProvider) => {
                 const sortedProxyNames = filterProxiesByAvailability(
@@ -296,11 +293,12 @@ export default () => {
                   <Collapse
                     isOpen={collapsedMap()[proxyProvider.name]}
                     title={title}
-                    content={<ProxyCardGroups proxyNames={sortedProxyNames} />}
                     onCollapse={(val) =>
                       setCollapsedMap(proxyProvider.name, val)
                     }
-                  />
+                  >
+                    <ProxyCardGroups proxyNames={sortedProxyNames} />
+                  </Collapse>
                 )
               }}
             </For>