diff --git a/apps/builder/app/builder/shared/copy-to-clipboard.tsx b/apps/builder/app/builder/shared/copy-to-clipboard.tsx
new file mode 100644
index 0000000000..1ea75a5b75
--- /dev/null
+++ b/apps/builder/app/builder/shared/copy-to-clipboard.tsx
@@ -0,0 +1,42 @@
+import { Tooltip } from "@webstudio-is/design-system";
+import { useState } from "react";
+
+export const CopyToClipboard = ({
+ text,
+ copyText = "Copy to clipboard",
+ copiedText = "Copied",
+ children,
+}: {
+ text: string;
+ copyText?: string;
+ copiedText?: string;
+ children: React.ReactNode;
+}) => {
+ const [isCopied, setIsCopied] = useState(false);
+
+ return (
+ {
+ navigator.clipboard.writeText(text);
+ setIsCopied(true);
+ }}
+ >
+ {
+ if (isOpen === false) {
+ setIsCopied(false);
+ }
+ }}
+ >
+ {children}
+
+
+ );
+};
diff --git a/apps/builder/app/shared/share-project/share-project.tsx b/apps/builder/app/shared/share-project/share-project.tsx
index 6563a97740..7a64f8f87a 100644
--- a/apps/builder/app/shared/share-project/share-project.tsx
+++ b/apps/builder/app/shared/share-project/share-project.tsx
@@ -31,6 +31,7 @@ import {
} from "@webstudio-is/icons";
import { Fragment, useState, type ComponentProps, type ReactNode } from "react";
import { useIds } from "../form-utils";
+import { CopyToClipboard } from "~/builder/shared/copy-to-clipboard";
const Item = (props: ComponentProps) => (
{
const [currentName, setCurrentName] = useState(value.name);
- const [isCopied, setIsCopied] = useState(false);
return (
- {
- if (isOpen === false) {
- setIsCopied(false);
- }
- }}
+
- {
- navigator.clipboard.writeText(
- builderUrl({
- authToken: value.token,
- mode: value.relation === "viewers" ? "preview" : "edit",
- })
- );
- setIsCopied(true);
- }}
- >
+
-
+