diff --git a/src/components/mainScreen/mobileAddPart/mobileAddPart.css b/src/components/mainScreen/mobileAddPart/mobileAddPart.css index a380072..29b4a84 100644 --- a/src/components/mainScreen/mobileAddPart/mobileAddPart.css +++ b/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; +} diff --git a/src/components/mainScreen/mobileAddPart/shareContainer.tsx b/src/components/mainScreen/mobileAddPart/shareContainer.tsx index dbc89c3..4a1f541 100644 --- a/src/components/mainScreen/mobileAddPart/shareContainer.tsx +++ b/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 = React.memo((props) => { + const [accessCode, setAccessCode] = useState('123 456'); + const [accessHref, setAccessHref] = useState('https://www.youtube.com/watch?v=dQw4w9WgXcQ'); + const [isCopiedCode, setIsCopiedCode] = useState(false); + const [isCopiedHref, setIsCopiedHref] = useState(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
Код подключения
- -
+ +
+ + { + isCopiedCode + ? 'Скопировано' + : 'Скопировать' + } + +
@@ -23,10 +50,13 @@ export const ShareContainer:React.FC = React.memo((props) => {
- +