feat: deal id display

package.json

@@ -11,6 +11,10 @@
     "generate-client": "openapi --input http://127.0.0.1:8000/openapi.json --output ./src/client --client axios --useOptions --useUnionTypes"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@hello-pangea/dnd": "^16.6.0",
     "@mantine/core": "^7.11.2",
     "@mantine/dates": "^7.11.2",

src/components/Dnd/DealSummaryCard/DealSummaryCard.tsx

@@ -2,9 +2,11 @@ import {FC} from "react";
 import {DealService, DealSummary} from "../../../client";
 import styles from './DealSummaryCard.module.css';
 
-import {ActionIcon, Text, Image, Badge} from '@mantine/core';
+import {ActionIcon, Badge, CopyButton, Flex, Image, Popover, rem, Text} from '@mantine/core';
 import classNames from "classnames";
 import {useDealPageContext} from "../../../pages/LeadsPage/contexts/DealPageContext.tsx";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faCheck} from "@fortawesome/free-solid-svg-icons";
 
 type Props = {
     dealSummary: DealSummary
@@ -55,7 +57,9 @@ const DealSummaryCard: FC<Props> = ({dealSummary}) => {
                     </Text>
                 </div>
             </div>
-            <div className={classNames(styles['flex-row'], styles['flex-row-right'])}>
+            <div
+
+                className={classNames(styles['flex-row'], styles['flex-row-right'])}>
                 <div className={styles['flex-item']}>
                     <ActionIcon variant={"transparent"}>
                         <Image src={dealSummary.baseMarketplace?.iconUrl || ""}/>
@@ -66,11 +70,37 @@ const DealSummaryCard: FC<Props> = ({dealSummary}) => {
                         {new Date(dealSummary.deadline).toLocaleString('ru-RU').slice(0, -3)}
                     </Text>
                 </div>
-                <div className={styles['flex-item']}>
+                <CopyButton value={"https://google.com"}>
-                    <Badge variant={"light"} radius={"sm"}>
+                    {({copy, copied}) => (
-                        ID: {dealSummary.id}
+                        <Popover opened={copied} withArrow>
-                    </Badge>
+                            <Popover.Target>
-                </div>
+                                <div
+
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        copy();
+                                    }}
+                                    className={styles['flex-item']}>
+                                    <Badge variant={"light"} radius={"sm"}>
+                                        ID: {dealSummary.id}
+                                    </Badge>
+                                </div>
+                            </Popover.Target>
+                            <Popover.Dropdown>
+                                <Flex justify={"center"} align={"center"} gap={rem(5)}>
+                                    <FontAwesomeIcon
+                                        bounce
+                                        style={{animationIterationCount: 1}}
+                                        icon={faCheck}
+                                    />
+                                    <Text size={"xs"}>ID сделки скопирован</Text>
+                                </Flex>
+
+                            </Popover.Dropdown>
+                        </Popover>
+                    )}
+                </CopyButton>
+
             </div>
 
         </div>