[incubator-devlake] 01/03: feat(config-ui): add new component copy-text

[mi...@apache.org]

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

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

commit 104da03dcee8a9137608bc31cb0ba2dd69f39f9f
Author: mintsweet <0x...@gmail.com>
AuthorDate: Fri Sep 8 20:37:36 2023 +1200

    feat(config-ui): add new component copy-text
---
 .../action/{index.ts => copy-text/index.tsx}       | 31 ++++++++++++++++++++--
 config-ui/src/components/action/index.ts           |  1 +
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/config-ui/src/components/action/index.ts b/config-ui/src/components/action/copy-text/index.tsx
similarity index 52%
copy from config-ui/src/components/action/index.ts
copy to config-ui/src/components/action/copy-text/index.tsx
index 1c4b7ef13..ceeb8451f 100644
--- a/config-ui/src/components/action/index.ts
+++ b/config-ui/src/components/action/copy-text/index.tsx
@@ -16,5 +16,32 @@
  *
  */
 
-export * from './external-link';
-export * from './icon-button';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import styled from 'styled-components';
+
+import { TextTooltip, IconButton, toast } from '@/components';
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  background: #f0f4fe;
+`;
+
+interface Props {
+  content: string;
+}
+
+export const CopyText = ({ content }: Props) => {
+  return (
+    <Wrapper>
+      <TextTooltip style={{ width: '96%' }} content={content}>
+        {content}
+      </TextTooltip>
+      <CopyToClipboard text={content} onCopy={() => toast.success('Copy successfully.')}>
+        <IconButton icon="clipboard" tooltip="Copy" />
+      </CopyToClipboard>
+    </Wrapper>
+  );
+};
diff --git a/config-ui/src/components/action/index.ts b/config-ui/src/components/action/index.ts
index 1c4b7ef13..c16968efc 100644
--- a/config-ui/src/components/action/index.ts
+++ b/config-ui/src/components/action/index.ts
@@ -16,5 +16,6 @@
  *
  */
 
+export * from './copy-text';
 export * from './external-link';
 export * from './icon-button';