You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.2 KiB
42 lines
1.2 KiB
<script lang='ts'> |
|
import { ClipboardCheckOutline, ClipboardCleanOutline } from "flowbite-svelte-icons"; |
|
import { withTimeout } from "$lib/utils/nostrUtils"; |
|
import type { Component } from "svelte"; |
|
|
|
let { displayText, copyText = displayText, icon = ClipboardCleanOutline } = $props<{ |
|
displayText: string; |
|
copyText?: string; |
|
icon?: Component | false; |
|
}>(); |
|
|
|
let copied: boolean = $state(false); |
|
|
|
async function copyToClipboard() { |
|
try { |
|
await withTimeout(navigator.clipboard.writeText(copyText), 2000); |
|
copied = true; |
|
await withTimeout( |
|
new Promise(resolve => setTimeout(resolve, 4000)), |
|
4000 |
|
).then(() => { |
|
copied = false; |
|
}).catch(() => { |
|
// If timeout occurs, still reset the state |
|
copied = false; |
|
}); |
|
} catch (err) { |
|
console.error("[CopyToClipboard] Failed to copy:", err instanceof Error ? err.message : err); |
|
} |
|
} |
|
</script> |
|
|
|
<button class='btn-leather w-full text-left' onclick={copyToClipboard}> |
|
{#if copied} |
|
<ClipboardCheckOutline class="inline mr-2" /> Copied! |
|
{:else} |
|
{#if icon} |
|
<svelte:component this={icon} class="inline mr-2" /> |
|
{/if} |
|
{displayText} |
|
{/if} |
|
</button>
|
|
|