Kaynağa Gözat

feat: add copy button component

Thomas Zhang 2 ay önce
ebeveyn
işleme
3fb2d7ab41

+ 23 - 0
src/lib/components/common/copy/button.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Check, Copy } from '@lucide/svelte';
+
+	import { Button } from '$lib/components/controls/button';
+
+	let { content }: { content: string } = $props();
+
+	let copied = $state(false);
+
+	const onCopy = async () => {
+		await navigator.clipboard.writeText(content);
+		copied = true;
+		setTimeout(() => (copied = false), 2000);
+	};
+</script>
+
+<Button size="icon-xs" variant="ghost" onclick={() => onCopy()}>
+	{#if copied}
+		<Check size={14} strokeWidth={2} />
+	{:else}
+		<Copy size={14} strokeWidth={2} />
+	{/if}
+</Button>

+ 3 - 0
src/lib/components/common/copy/index.ts

@@ -0,0 +1,3 @@
+import CopyButton from './button.svelte';
+
+export { CopyButton };