refactor: cluster list

src/pages/cluster-management/components/provider-catalog.tsx

@@ -1,6 +1,6 @@
 import Card from '@/components/templates/card';
 import { useIntl } from '@umijs/max';
-import React from 'react';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
 import { ProviderType } from '../config';
 
@@ -9,6 +9,22 @@ const Wrapper = styled.div`
   grid-template-columns: 1fr 1fr 1fr;
   gap: 22px;
 `;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const Title = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 700;
+  font-size: 18px;
+  margin-block: 16px 24px;
+`;
+
 interface ProviderCatalogProps {
   onSelect?: (provider: ProviderType) => void;
   currentProvider?: ProviderType;
@@ -20,6 +36,7 @@ interface ProviderCatalogProps {
     disabled?: boolean;
     icon: React.ReactNode;
     description?: string;
+    group?: string;
   }[];
 }
 
@@ -30,27 +47,46 @@ const ProviderCatalog: React.FC<ProviderCatalogProps> = ({
   currentProvider
 }) => {
   const intl = useIntl();
+
+  const groupList = useMemo(() => {
+    if (!dataList) return {};
+    return dataList?.reduce(
+      (acc, item) => {
+        (acc[item.group || 'default'] ??= []).push(item);
+        return acc;
+      },
+      {} as Record<string, typeof dataList>
+    );
+  }, [dataList]);
+
   return (
-    <Wrapper>
-      {dataList?.map((action) => (
-        <Card
-          height="auto"
-          key={action.key}
-          onClick={() => onSelect?.(action.key as ProviderType)}
-          active={currentProvider === action.key}
-          disabled={action.disabled}
-          clickable={clickable}
-          header={
-            action.locale
-              ? intl.formatMessage({ id: action.label })
-              : action.label
-          }
-          icon={action.icon}
-        >
-          {action.description || 'This is a description'}
-        </Card>
+    <Container>
+      {Object.entries(groupList).map(([groupName, items]) => (
+        <div key={groupName}>
+          {groupName !== 'default' && <Title>{groupName}</Title>}
+          <Wrapper>
+            {items?.map((action) => (
+              <Card
+                height="auto"
+                key={action.key}
+                onClick={() => onSelect?.(action.key as ProviderType)}
+                active={currentProvider === action.key}
+                disabled={action.disabled}
+                clickable={clickable}
+                header={
+                  action.locale
+                    ? intl.formatMessage({ id: action.label })
+                    : action.label
+                }
+                icon={action.icon}
+              >
+                {action.description || 'This is a description'}
+              </Card>
+            ))}
+          </Wrapper>
+        </div>
       ))}
-    </Wrapper>
+    </Container>
   );
 };