Spaces:
Runtime error
Runtime error
copy to clip
Browse files
frontend/src/lib/Palette.svelte
CHANGED
@@ -1,14 +1,29 @@
|
|
1 |
<script lang="ts">
|
2 |
import * as d3 from 'd3-color';
|
|
|
3 |
import type { ColorsPrompt } from '$lib/types';
|
4 |
import ColorPalette from '$lib/ColorPalette.svelte';
|
5 |
|
|
|
|
|
6 |
export let promptData: ColorsPrompt;
|
7 |
-
|
8 |
let seletecdImage = 0;
|
9 |
$: prompt = promptData.prompt;
|
10 |
$: colors = promptData.images[seletecdImage].colors.map((e) => d3.rgb(e));
|
11 |
$: imageSrc = promptData.images[seletecdImage].imgURL;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
12 |
</script>
|
13 |
|
14 |
<div class="grid grid-cols-6 gap-3">
|
@@ -39,16 +54,20 @@
|
|
39 |
</div>
|
40 |
<div class="row-start-4 col-span-6 md:col-span-2 md:col-start-5 flex justify-center">
|
41 |
<div class="flex justify-center items-center">
|
|
|
42 |
<button
|
43 |
-
class="
|
|
|
|
|
44 |
>
|
45 |
-
|
46 |
-
</button>
|
47 |
-
<button
|
48 |
-
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"
|
49 |
-
>
|
50 |
-
Copy
|
51 |
</button>
|
52 |
</div>
|
53 |
</div>
|
54 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
<script lang="ts">
|
2 |
import * as d3 from 'd3-color';
|
3 |
+
import { createEventDispatcher } from 'svelte';
|
4 |
import type { ColorsPrompt } from '$lib/types';
|
5 |
import ColorPalette from '$lib/ColorPalette.svelte';
|
6 |
|
7 |
+
const dispatch = createEventDispatcher();
|
8 |
+
|
9 |
export let promptData: ColorsPrompt;
|
10 |
+
|
11 |
let seletecdImage = 0;
|
12 |
$: prompt = promptData.prompt;
|
13 |
$: colors = promptData.images[seletecdImage].colors.map((e) => d3.rgb(e));
|
14 |
$: imageSrc = promptData.images[seletecdImage].imgURL;
|
15 |
+
|
16 |
+
let isCopying = false;
|
17 |
+
async function copyStringToClipboard(text: string) {
|
18 |
+
// usingo Clipboard API
|
19 |
+
if (isCopying) return;
|
20 |
+
isCopying = true;
|
21 |
+
await navigator.permissions.query({ name: 'clipboard-write' });
|
22 |
+
await navigator.clipboard.writeText(text);
|
23 |
+
setTimeout(() => {
|
24 |
+
isCopying = false;
|
25 |
+
}, 1000);
|
26 |
+
}
|
27 |
</script>
|
28 |
|
29 |
<div class="grid grid-cols-6 gap-3">
|
|
|
54 |
</div>
|
55 |
<div class="row-start-4 col-span-6 md:col-span-2 md:col-start-5 flex justify-center">
|
56 |
<div class="flex justify-center items-center">
|
57 |
+
<button class="button" on:click={() => dispatch('remix', { prompt })}> Remix </button>
|
58 |
<button
|
59 |
+
class="button"
|
60 |
+
disabled={isCopying}
|
61 |
+
on:click={() => copyStringToClipboard(colors.map((color) => color.formatHex()).join(', '))}
|
62 |
>
|
63 |
+
{isCopying? 'Copied' : 'Copy'}
|
|
|
|
|
|
|
|
|
|
|
64 |
</button>
|
65 |
</div>
|
66 |
</div>
|
67 |
</div>
|
68 |
+
|
69 |
+
<style lang="postcss" scoped>
|
70 |
+
.button {
|
71 |
+
@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;
|
72 |
+
}
|
73 |
+
</style>
|
frontend/src/routes/+page.svelte
CHANGED
@@ -109,6 +109,9 @@
|
|
109 |
}
|
110 |
return colorImages;
|
111 |
}
|
|
|
|
|
|
|
112 |
</script>
|
113 |
|
114 |
<div class="max-w-screen-md mx-auto px-3 py-8 relative z-0">
|
@@ -138,7 +141,7 @@
|
|
138 |
{#if promptsData}
|
139 |
<div class="pt-5">
|
140 |
{#each promptsData as promptData}
|
141 |
-
<Pallette {promptData} />
|
142 |
<div class="border-b border-gray-200 py-2" />
|
143 |
{/each}
|
144 |
</div>
|
|
|
109 |
}
|
110 |
return colorImages;
|
111 |
}
|
112 |
+
function remix(e: CustomEvent) {
|
113 |
+
prompt = e.detail.prompt;
|
114 |
+
}
|
115 |
</script>
|
116 |
|
117 |
<div class="max-w-screen-md mx-auto px-3 py-8 relative z-0">
|
|
|
141 |
{#if promptsData}
|
142 |
<div class="pt-5">
|
143 |
{#each promptsData as promptData}
|
144 |
+
<Pallette {promptData} on:remix={remix} />
|
145 |
<div class="border-b border-gray-200 py-2" />
|
146 |
{/each}
|
147 |
</div>
|