Spaces:
Runtime error
Runtime error
<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> | |