feat: show check icon and toast when copied

This commit is contained in:
JovannMC 2025-02-20 20:45:16 +03:00
parent 10c7b035a2
commit 90ca53c2a5
No known key found for this signature in database
1 changed files with 33 additions and 22 deletions

View File

@ -1,14 +1,22 @@
<script lang="ts">
import Panel from "$lib/components/visual/Panel.svelte";
import { PiggyBankIcon, CopyIcon } from "lucide-svelte";
import { PiggyBankIcon, CopyIcon, CheckIcon } from "lucide-svelte";
import HotMilk from "$lib/assets/hotmilk.svg?component";
import { DISCORD_URL } from "$lib/consts";
import { error } from "$lib/logger";
import { addToast } from "$lib/store/ToastProvider";
let copied = false;
let timeoutId: number | undefined;
function copyToClipboard() {
try {
navigator.clipboard.writeText("hello@vert.sh");
alert("Email copied to clipboard!");
copied = true;
addToast("success", "Email copied to clipboard!");
if (timeoutId) clearTimeout(timeoutId);
timeoutId = setTimeout(() => (copied = false), 2000);
} catch (err) {
error(`Failed to copy email: ${err}`);
}
@ -34,27 +42,30 @@
<HotMilk class="w-full h-16" />
</a>
</div>
<div>
<p class="text-muted">
Want to support us? Contact a developer in the <a
href={DISCORD_URL}
target="_blank">Discord</a
<p class="text-muted">
Want to support us? Contact a developer in the <a
href={DISCORD_URL}
target="_blank">Discord</a
>
server, or send an email to
<span class="inline-block mx-[2px] relative top-[2px]">
<button
id="email"
class="flex items-center gap-[6px] cursor-pointer"
onclick={copyToClipboard}
aria-label="Copy email to clipboard"
>
server, or send an email to
<span class="inline-block mx-[2px] relative top-[2px]"
><button
id="email"
class="flex items-center gap-2 cursor-pointer"
onclick={copyToClipboard}
aria-label="Copy email to clipboard"
>
<CopyIcon size="14"></CopyIcon> hello@vert.sh
</button></span
>!
</p>
</div>
</div></Panel
>
{#if copied}
<CheckIcon size="14"></CheckIcon>
{:else}
<CopyIcon size="14"></CopyIcon>
{/if}
hello@vert.sh
</button>
</span>!
</p>
</div>
</Panel>
<style>
#email {