RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/lib/sections/about/Vertd.svelte
View File

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