Skip to content

Commit 444d05b

Browse files
added the tooltip and set the copied timeout to be at 2sec
1 parent 7c9e5b9 commit 444d05b

File tree

1 file changed

+18
-7
lines changed

1 file changed

+18
-7
lines changed

src/lib/components/blog/post-meta.svelte

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
import { handleCopy } from '$lib/utils/copy';
44
import { formatDate } from '$lib/utils/date';
55
import type { AuthorData } from '$routes/blog/content';
6-
import { page } from '$app/state';
6+
7+
import {Tooltip} from '$lib/components';
8+
import { melt } from '@melt-ui/svelte';
79
810
interface Props {
911
date?: string;
@@ -27,6 +29,8 @@
2729
const blogPostUrl = encodeURI(currentURL);
2830
return shareOption.link.replace('{TITLE}', title + '.').replace('{URL}', blogPostUrl);
2931
};
32+
const { copied, copy } = handleCopy(currentURL, 2000);
33+
3034
</script>
3135

3236
<header>
@@ -88,12 +92,19 @@
8892
<span class={sharingOption.icon} aria-hidden="true"></span>
8993
</a>
9094
{:else}
91-
<button
92-
aria-label={sharingOption.label}
93-
onclick={() => handleCopy(currentURL)}
94-
>
95-
<span class={sharingOption.icon} aria-hidden="true"></span>
96-
</button>
95+
<Tooltip>
96+
{#snippet asChild({ trigger })}
97+
98+
<button onclick={copy}
99+
use:melt={trigger}
100+
aria-label={sharingOption.label}>
101+
<span class={sharingOption.icon} aria-hidden="true"></span>
102+
</button>
103+
{/snippet}
104+
{#snippet tooltip()}
105+
{$copied ? 'Copied!' : 'Copy'}
106+
{/snippet}
107+
</Tooltip>
97108
{/if}
98109
</li>
99110
{/each}

0 commit comments

Comments
 (0)