From 7e3df042ecf0312e89cdf2478ce1bdd46f22eb7f Mon Sep 17 00:00:00 2001
From: QiShaoXuan <qishaoxuan777@gmail.com>
Date: Fri, 12 Aug 2022 16:10:05 +0800
Subject: [PATCH] feat: update pendant add button

---
 .../src/block-pendant/AddPendantPopover.tsx   | 27 ++++++++++++++++---
 .../pendant-popover/PendantPopover.tsx        |  1 +
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx b/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx
index bbb61be631..015f8a4120 100644
--- a/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx
+++ b/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx
@@ -4,7 +4,10 @@ import {
     Popover,
     type PopoverProps,
     PopperHandler,
+    Tag,
 } from '@toeverything/components/ui';
+import { TagsIcon } from '@toeverything/components/icons';
+
 import { CreatePendantPanel } from './pendant-operation-panel';
 import { IconButton } from './StyledComponent';
 import { AsyncBlock } from '../editor';
@@ -13,11 +16,13 @@ type Props = {
     block: AsyncBlock;
     onSure?: () => void;
     iconStyle?: CSSProperties;
+    useAddIcon?: boolean;
 } & Omit<PopoverProps, 'content'>;
 export const AddPendantPopover = ({
     block,
     onSure,
     iconStyle,
+    useAddIcon = true,
     ...popoverProps
 }: Props) => {
     const popoverHandlerRef = useRef<PopperHandler>();
@@ -38,9 +43,25 @@ export const AddPendantPopover = ({
             style={{ padding: 0 }}
             {...popoverProps}
         >
-            <IconButton style={{ marginRight: 12, ...iconStyle }}>
-                <Add sx={{ fontSize: 14 }} />
-            </IconButton>
+            {useAddIcon ? (
+                <IconButton style={{ marginRight: 12, ...iconStyle }}>
+                    <Add sx={{ fontSize: 14 }} />
+                </IconButton>
+            ) : (
+                <Tag
+                    style={{
+                        background: '#F5F7F8',
+                        color: '#98ACBD',
+                        marginRight: 12,
+                        marginBottom: 8,
+                    }}
+                    startElement={
+                        <TagsIcon style={{ fontSize: 14, marginRight: 4 }} />
+                    }
+                >
+                    Tag App
+                </Tag>
+            )}
         </Popover>
     );
 };
diff --git a/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx b/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx
index d92a2ab8b4..36d785a181 100644
--- a/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx
+++ b/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx
@@ -33,6 +33,7 @@ export const PendantPopover = (
                             }}
                             offset={[0, -30]}
                             trigger="click"
+                            useAddIcon={false}
                         />
                     }
                     onClose={() => {