(incubator-devlake) 24/48: feat: add a new component ShowMore

[mintsweet]

This is an automated email from the ASF dual-hosted git repository.

mintsweet pushed a commit to branch feat-dora-config
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git

commit 4e61ee8d7b49f821385307cfd11e96789311f066
Author: mintsweet <0x1304...@gmail.com>
AuthorDate: Tue Sep 17 21:01:34 2024 +1200

    feat: add a new component ShowMore
---
 config-ui/src/components/index.ts                  |  1 +
 .../components/{index.ts => show-more/index.tsx}   | 42 ++++++++++++++++------
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/config-ui/src/components/index.ts 
b/config-ui/src/components/index.ts
index 6dc50b33a..576c1433f 100644
--- a/config-ui/src/components/index.ts
+++ b/config-ui/src/components/index.ts
@@ -25,5 +25,6 @@ export * from './markdown';
 export * from './message';
 export * from './no-data';
 export * from './page-header';
+export * from './show-more';
 export * from './tip-layout';
 export * from './tooltip';
diff --git a/config-ui/src/components/index.ts 
b/config-ui/src/components/show-more/index.tsx
similarity index 52%
copy from config-ui/src/components/index.ts
copy to config-ui/src/components/show-more/index.tsx
index 6dc50b33a..1126bd2c2 100644
--- a/config-ui/src/components/index.ts
+++ b/config-ui/src/components/show-more/index.tsx
@@ -16,14 +16,34 @@
  *
  */
 
-export * from './action';
-export * from './block';
-export * from './inspector';
-export * from './loading';
-export * from './logo';
-export * from './markdown';
-export * from './message';
-export * from './no-data';
-export * from './page-header';
-export * from './tip-layout';
-export * from './tooltip';
+import { useState } from 'react';
+import { CaretDownFilled, CaretRightFilled } from '@ant-design/icons';
+import { Flex, Button } from 'antd';
+
+interface Props {
+  text?: React.ReactNode;
+  btnText: string;
+  children: React.ReactNode;
+}
+
+export const ShowMore = ({ text, btnText, children }: Props) => {
+  const [show, setShow] = useState(false);
+
+  return (
+    <div>
+      <Flex align="center">
+        {text}
+        <Button
+          type="link"
+          size="small"
+          icon={show ? <CaretDownFilled /> : <CaretRightFilled />}
+          iconPosition="end"
+          onClick={() => setShow(!show)}
+        >
+          {btnText}
+        </Button>
+      </Flex>
+      {show && children}
+    </div>
+  );
+};