radames commited on
Commit
daf00a0
β€’
1 Parent(s): 88e9166

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
- console.log(promptData);
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="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"
 
 
44
  >
45
- Remix
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>