copy to clip

frontend/src/lib/Palette.svelte

@@ -1,14 +1,29 @@
 <script lang="ts">
 	import * as d3 from 'd3-color';
+	import { createEventDispatcher } from 'svelte';
 	import type { ColorsPrompt } from '$lib/types';
 	import ColorPalette from '$lib/ColorPalette.svelte';
 
+	const dispatch = createEventDispatcher();
+
 	export let promptData: ColorsPrompt;
-	console.log(promptData);
+
 	let seletecdImage = 0;
 	$: prompt = promptData.prompt;
 	$: colors = promptData.images[seletecdImage].colors.map((e) => d3.rgb(e));
 	$: imageSrc = promptData.images[seletecdImage].imgURL;
+
+	let isCopying = false;
+	async function copyStringToClipboard(text: string) {
+		// usingo Clipboard API
+		if (isCopying) return;
+		isCopying = true;
+		await navigator.permissions.query({ name: 'clipboard-write' });
+		await navigator.clipboard.writeText(text);
+		setTimeout(() => {
+			isCopying = false;
+		}, 1000);
+	}
 </script>
 
 <div class="grid grid-cols-6 gap-3">
@@ -39,16 +54,20 @@
 	</div>
 	<div class="row-start-4 col-span-6 md:col-span-2 md:col-start-5 flex justify-center">
 		<div class="flex justify-center items-center">
+			<button class="button" on:click={() => dispatch('remix', { prompt })}> Remix </button>
 			<button
-				class="bg-black text-white border-2 dark:border-white border-black rounded-2xl ml-2 px-2 py-2 shadow-sm text-xs font-bold focus:outline-none focus:border-gray-400"
+				class="button"
+				disabled={isCopying}
+				on:click={() => copyStringToClipboard(colors.map((color) => color.formatHex()).join(', '))}
 			>
-				Remix
-			</button>
-			<button
-				class="bg-black text-white border-2 dark:border-white border-black rounded-2xl ml-2 px-2 py-2 shadow-sm text-xs font-bold focus:outline-none focus:border-gray-400"
-			>
-				Copy
+				{isCopying? 'Copied' : 'Copy'}
 			</button>
 		</div>
 	</div>
 </div>
+
+<style lang="postcss" scoped>
+	.button {
+		@apply min-w-[9ch] bg-black text-white border-2 dark:border-white border-black rounded-2xl ml-2 px-2 py-2 shadow-sm text-xs font-bold focus:outline-none focus:border-gray-400;
+	}
+</style>

frontend/src/routes/+page.svelte

@@ -109,6 +109,9 @@
 		}
 		return colorImages;
 	}
+	function remix(e: CustomEvent) {
+		prompt = e.detail.prompt;
+	}
 </script>
 
 <div class="max-w-screen-md mx-auto px-3 py-8 relative z-0">
@@ -138,7 +141,7 @@
 	{#if promptsData}
 		<div class="pt-5">
 			{#each promptsData as promptData}
-				<Pallette {promptData} />
+				<Pallette {promptData} on:remix={remix} />
 				<div class="border-b border-gray-200 py-2" />
 			{/each}
 		</div>