frontend/src/lib/ColorPalette.svelte

<script lang="ts">
	import type { Color } from 'd3-color';
	import * as d3 from 'd3-color';

	export let colors: Color[];
	const n = colors.length;
	function getLabelColor(c: Color): string {
		const color = d3.hcl(c);
		if (color.l > 50) {
			return d3.hcl(color.h, color.c, 0).formatHex();
		}
		return d3.hcl(color.h, color.c, 100).formatHex();
	}
	let isCopying = -1;

	async function copyStringToClipboard(text: string, n: number) {
		// usingo Clipboard API
		if (isCopying > -1) return;
		isCopying = n;
		// await navigator.permissions.query({ name: 'clipboard-write' });
		await navigator.clipboard.write([
			new ClipboardItem({ 'text/plain': new Blob([text], { type: 'text/plain' }) })
		]);
		setTimeout(() => {
			isCopying = -1;
		}, 800);
	}
</script>

<div class="flex flex-col items-center">
	<div class="flex">
		{#each colors as color, i}
			<div
				class="{isCopying === i ? '' : 'cursor-pointer'} aspect-square relative"
				style="background-color: {color.formatHex()}"
				on:click={() => copyStringToClipboard(color.formatHex(), i)}
			>
				<svg class="block max-w-full aspect-square" width="100" viewBox="0 0 50 50">
					<rect x="0" y="0" width="50" height="50" fill={color.formatHex()} />
				</svg>
				<span
					title="Copy single color"
					class="absolute bottom-0 text-center text-xs pl-1 font-bold uppercase"
					style="color:{getLabelColor(color)}"
					>{isCopying === i ? 'copied' : color.formatHex()}</span
				>
			</div>
		{/each}
	</div>
</div>