diff --git a/frontend/app/components/NavigationRail/NavigationRail.jsx b/frontend/app/components/NavigationRail/NavigationRail.jsx index bad7d86..e399168 100644 --- a/frontend/app/components/NavigationRail/NavigationRail.jsx +++ b/frontend/app/components/NavigationRail/NavigationRail.jsx @@ -5,8 +5,10 @@ import Link from "next/link"; import Image from "next/image"; import { useUserStore } from "@/app/store/user-store"; import { useRouter } from "next/navigation"; +import useCopyToClipboard from "@/app/hooks/useCopyToClipboard"; export const NavigationRail = (props) => { + const [isCopied, copyToClipboard] = useCopyToClipboard(); const pathname = usePathname(); const userStore = useUserStore(); const router = useRouter(); @@ -98,6 +100,14 @@ export const NavigationRail = (props) => { )} + + copyToClipboard()}> + {isCopied ? "done" : "content_copy"} + + {isCopied ? "Ссылка скопирована" : "Скопировать ссылку"} + + + props.setSettingsPopup(!props.settingsPopup)} diff --git a/frontend/app/hooks/useCopyToClipboard.js b/frontend/app/hooks/useCopyToClipboard.js new file mode 100644 index 0000000..94a14e9 --- /dev/null +++ b/frontend/app/hooks/useCopyToClipboard.js @@ -0,0 +1,46 @@ +// hooks/useCopyToClipboard.js + +import { useState, useEffect } from "react"; + +function useCopyToClipboard() { + const [isCopied, setIsCopied] = useState(false); + + useEffect(() => { + if (isCopied) { + setTimeout(() => { + setIsCopied(false); + }, 2500); + } + }, [isCopied]); + + async function copyToClipboard(text) { + if (!navigator.clipboard) { + // Clipboard API not supported + try { + // Fallback for older browsers (like Firefox before v49) + const input = document.createElement("input"); + document.body.appendChild(input); + input.setAttribute("value", window.location.href); + input.select(); + document.execCommand("copy"); + document.body.removeChild(input); + setIsCopied(true); + } catch (err) { + console.error("Failed to copy text: ", err); + setIsCopied(false); + } + } else { + try { + await navigator.clipboard.writeText(window.location.href); + setIsCopied(true); + } catch (err) { + console.error("Failed to copy text: ", err); + setIsCopied(false); + } + } + } + + return [isCopied, copyToClipboard]; +} + +export default useCopyToClipboard;