добавлена возможность копирования данных в окне Поделиться, добавлено отображение этого

src/components/mainScreen/mobileAddPart/mobileAddPart.css

@@ -248,6 +248,8 @@
 }
 
 .share-container-item-copy-code-button-container {
+    border: none;
+    color: #FFFFFF;
     height: 48px;
     flex: 1;
     box-sizing: border-box;
@@ -297,6 +299,11 @@
     background-color: #FFFFFF;
 }
 
+.share-container-item-copy-code-button-container.copied,
+.share-container-item-copy-href-button.copied {
+    background-color: #219653;
+    transition: .3s;
+}
 
 
 

src/components/mainScreen/mobileAddPart/shareContainer.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { BorderLine } from "./borderLine";
 
 type TProps = {
@@ -6,15 +6,42 @@ type TProps = {
 }
 
 export const ShareContainer:React.FC<TProps> = React.memo((props) => {
+    const [accessCode, setAccessCode] = useState<string>('123 456');
+    const [accessHref, setAccessHref] = useState<string>('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
+    const [isCopiedCode, setIsCopiedCode] = useState<boolean>(false);
+    const [isCopiedHref, setIsCopiedHref] = useState<boolean>(false);
+
+    function copyToClipboard(value: string, type: 'code' | 'href') {        
+        navigator.clipboard.writeText(value).then(() => {
+            let copiedFunc = setIsCopiedCode;
+            if(type === 'href') {
+                copiedFunc = setIsCopiedHref;
+            } 
+            copiedFunc(true)
+            setTimeout(() => {
+                copiedFunc(false)
+            }, 2000);
+        })
+    }
+
     return <div className="share-container">
         <div className="share-container-item">
             <span className="share-container-item-title">Код подключения</span>
             <div className="share-container-item-buttons">
-                <input className="share-container-item-input code" value={'123 456'} readOnly></input>
-                <div className="share-container-item-copy-code-button-container">
+                <input className="share-container-item-input code" value={accessCode} readOnly></input>
+                <button 
+                    className={`share-container-item-copy-code-button-container ${isCopiedCode ? 'copied' : ''}`} 
+                    onClick={() => copyToClipboard(accessCode, 'code')}
+                >
                     <span className="share-container-item-copy-code-button-icon"></span>
-                    <span className="share-container-item-copy-code-button-text">Скопировать</span>
-                </div>
+                    <span className="share-container-item-copy-code-button-text">
+                        {
+                            isCopiedCode 
+                            ? 'Скопировано'
+                            : 'Скопировать'
+                        }
+                    </span>
+                </button>
             </div>
         </div>
         <BorderLine width="80%"/>
@@ -23,10 +50,13 @@ export const ShareContainer:React.FC<TProps> = React.memo((props) => {
             <div className="share-container-item-buttons">
                 <input 
                     className="share-container-item-input href" 
-                    value={'https://www.youtube.com/watch?v=dQw4w9WgXcQ'}
+                    value={accessHref}
                     readOnly
                 ></input>
-                <button className="share-container-item-copy-href-button"></button>
+                <button 
+                    className={`share-container-item-copy-href-button ${isCopiedHref ? 'copied' : ''}`}
+                    onClick={() => copyToClipboard(accessHref, 'href')}
+                ></button>
             </div>
         </div>
     </div>