feat: deals viewer mode and links for viewers

src/pages/ClientsPage/components/ClientLinkActionIcon/ClientLinkActionIcon.tsx

@@ -0,0 +1,57 @@
+import { ActionIcon, rem, Tooltip } from "@mantine/core";
+import { IconCheck, IconLink } from "@tabler/icons-react";
+import { FC } from "react";
+import { useClipboard } from "@mantine/hooks";
+import { ClientSchema, ClientService } from "../../../../client";
+import { notifications } from "../../../../shared/lib/notifications.ts";
+
+type Props = {
+    client: ClientSchema;
+};
+
+const ClientLinkActionIcon: FC<Props> = ({ client }) => {
+    const clipboard = useClipboard();
+
+    const onGetLinkClick = () => {
+        ClientService.clientLink({
+            clientId: client.id,
+        })
+            .then(({ ok, message, url }) => {
+                if (ok) {
+                    clipboard.copy(`${window.location.origin}/${url}`);
+                } else {
+                    notifications.error({ message });
+                }
+            })
+            .catch(err => console.log(err));
+    };
+
+    return (
+        <Tooltip
+            label={"Ссылка скопирована"}
+            offset={5}
+            radius="xl"
+            transitionProps={{ duration: 100, transition: "slide-down" }}
+            opened={clipboard.copied}>
+            <ActionIcon
+                variant={"default"}
+                size="md"
+                onClick={() => onGetLinkClick()}
+            >
+                {clipboard.copied ? (
+                    <IconCheck
+                        style={{ width: rem(20), height: rem(20) }}
+                        stroke={1.5}
+                    />
+                ) : (
+                    <IconLink
+                        style={{ width: rem(20), height: rem(20) }}
+                        stroke={1.5}
+                    />
+                )}
+            </ActionIcon>
+        </Tooltip>
+    );
+};
+
+export default ClientLinkActionIcon;