Spaces:
Runtime error
Runtime error
File size: 1,490 Bytes
0e2b5bb 88e9166 0e2b5bb 88e9166 836ca1d f3dda63 836ca1d 4665ae6 836ca1d 0e2b5bb 13fd302 836ca1d 4665ae6 13fd302 836ca1d 13fd302 88e9166 0e2b5bb 88e9166 836ca1d 4665ae6 88e9166 0e2b5bb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<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>
|