Share link

import { createCopyButton } from "@reuse-sh/interactions";
import "@reuse-sh/interactions/styles.css";

// <input class="link" value="https://prints.example/coral-sky" readonly />
// <button class="copy-link">Copy link</button>
const input = document.querySelector(".link");
const copy = createCopyButton(document.querySelector(".copy-link"), {
  getText: () => input.value,
  onError: () => input.select(),
});

import { CopyButton } from "@reuse-sh/interactions/react";
import "@reuse-sh/interactions/styles.css";

export function ShareLink({ url }) {
  return (
    <div className="share">
      <input value={url} readOnly aria-label="Link to the print" />
      <CopyButton text={url}>Copy link</CopyButton>
    </div>
  );
}