diff --git a/apps/builder/app/builder/features/topbar/domains.tsx b/apps/builder/app/builder/features/topbar/domains.tsx index 00264c68e1..f87f23abdd 100644 --- a/apps/builder/app/builder/features/topbar/domains.tsx +++ b/apps/builder/app/builder/features/topbar/domains.tsx @@ -36,6 +36,7 @@ import { $publisherHost } from "~/shared/nano-states"; import { extractCname } from "./cname"; import { useEffectEvent } from "~/shared/hook-utils/effect-event"; import DomainCheckbox from "./domain-checkbox"; +import { CopyToClipboard } from "~/builder/shared/copy-to-clipboard"; export type Domain = Project["domainsVirtual"][number]; @@ -45,21 +46,6 @@ const InputEllipsis = styled(InputField, { }, }); -const CopyToClipboard = (props: { text: string }) => { - return ( - - { - navigator.clipboard.writeText(props.text); - }} - > - - - - ); -}; - export const getStatus = (projectDomain: Domain) => projectDomain.verified ? (`VERIFIED_${projectDomain.status}` as const) @@ -456,24 +442,48 @@ const DomainItem = (props: { } + suffix={ + + + + + + } /> } + suffix={ + + + + + + } /> } + suffix={ + + + + + + } /> } + suffix={ + + + + + + } /> diff --git a/apps/builder/app/builder/features/topbar/publish.tsx b/apps/builder/app/builder/features/topbar/publish.tsx index b355de9f7b..7b0b179831 100644 --- a/apps/builder/app/builder/features/topbar/publish.tsx +++ b/apps/builder/app/builder/features/topbar/publish.tsx @@ -56,6 +56,7 @@ import { isFeatureEnabled } from "@webstudio-is/feature-flags"; import type { Templates } from "@webstudio-is/sdk"; import { formatDistance } from "date-fns/formatDistance"; import DomainCheckbox, { domainToPublishName } from "./domain-checkbox"; +import { CopyToClipboard } from "~/builder/shared/copy-to-clipboard"; type ChangeProjectDomainProps = { project: Project; @@ -778,18 +779,11 @@ const ExportContent = (props: { projectId: Project["id"] }) => { value={npxCommand} /> - - - + @@ -820,21 +814,17 @@ const ExportContent = (props: { projectId: Project["id"] }) => { .trimStart() .replace(/ +$/, "")} /> - + + - + 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); - }} - > + - +