Spaces:
Paused
Paused
| <script lang="ts"> | |
| import { onDestroy } from "svelte"; | |
| import IconCopy from "./icons/IconCopy.svelte"; | |
| import Tooltip from "./Tooltip.svelte"; | |
| export let classNames = ""; | |
| export let value: string; | |
| let isSuccess = false; | |
| let timeout: ReturnType<typeof setTimeout>; | |
| const handleClick = async () => { | |
| // writeText() can be unavailable or fail in some cases (iframe, etc) so we try/catch | |
| try { | |
| await navigator.clipboard.writeText(value); | |
| isSuccess = true; | |
| if (timeout) { | |
| clearTimeout(timeout); | |
| } | |
| timeout = setTimeout(() => { | |
| isSuccess = false; | |
| }, 1000); | |
| } catch (err) { | |
| console.error(err); | |
| } | |
| }; | |
| onDestroy(() => { | |
| if (timeout) { | |
| clearTimeout(timeout); | |
| } | |
| }); | |
| </script> | |
| <button | |
| class="btn rounded-lg border border-gray-200 px-2 py-2 text-sm shadow-sm transition-all hover:border-gray-300 active:shadow-inner dark:border-gray-700 dark:hover:border-gray-500 {classNames}" | |
| title={"Copy to clipboard"} | |
| type="button" | |
| on:click | |
| on:click={handleClick} | |
| > | |
| <div class="relative"> | |
| <slot> | |
| <IconCopy /> | |
| </slot> | |
| <Tooltip classNames={isSuccess ? "opacity-100" : "opacity-0"} /> | |
| </div> | |
| </button> | |