| 1 | import { createSignal, type JSX } from "solid-js"; |
| 2 | |
| 3 | /** |
| 4 | * Text that copies `value` on click; the tooltip turns into the result. Shows `value` unless given children, and |
| 5 | * `label` names what's copied when that isn't what's shown. |
| 6 | */ |
| 7 | export function Copy(props: { value: string; label?: string; children?: JSX.Element }) { |
| 8 | const [result, setResult] = createSignal(""); |
| 9 | const copy = () => |
| 10 | Promise.resolve() |
| 11 | .then(() => navigator.clipboard.writeText(props.value)) |
| 12 | .then(() => setResult("copied"), () => setResult("Couldn't copy. Select the text instead")); |
| 13 | return ( |
| 14 | <> |
| 15 | <button type="button" class="copy" data-tip={result() || (props.label ? `copy ${props.label}` : "copy")} onClick={copy} |
| 16 | onPointerLeave={() => setResult("")} onBlur={() => setResult("")}> |
| 17 | {props.children ?? props.value} |
| 18 | </button> |
| 19 | <span class="sr-only" role="status">{result()}</span> |
| 20 | </> |
| 21 | ); |
| 22 | } |