File size: 2,774 Bytes
4e0a699 |
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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<script lang="ts">
import * as d3 from 'd3-color';
import { createEventDispatcher } from 'svelte';
import type { ColorsPrompt } from '$lib/types';
import ColorPalette from '$lib/ColorPalette.svelte';
const dispatch = createEventDispatcher();
export let promptData: ColorsPrompt;
let seletecdImage = 0;
$: prompt = promptData?.prompt;
$: colors = promptData?.images[seletecdImage]?.colors.map((e) => d3.rgb(e)) || [];
$: imageSrc = promptData?.images[seletecdImage]?.imgURL;
let isCopying = false;
async function copyStringToClipboard(text: string) {
// usingo Clipboard API
if (isCopying) return;
isCopying = true;
// await navigator.permissions.query({ name: 'clipboard-write' });
await navigator.clipboard.write([
new ClipboardItem({ 'text/plain': new Blob([text], { type: 'text/plain' }) })
]);
setTimeout(() => {
isCopying = false;
}, 1000);
}
</script>
<div class="grid grid-cols-6 gap-3">
<blockquote
class="row-start-1 mx-auto col-span-6 italic font-semibold max-w-prose text-base text-center line-clamp-3 my-3"
title={prompt}
>
<p>{prompt}</p>
</blockquote>
<div class="row-start-3 md:row-start-2 col-span-6 md:col-span-4 flex items-center justify-center">
{#if colors}
<ColorPalette {colors} />
{/if}
</div>
<div class="row-start-2 col-span-6 md:col-span-2 flex justify-center md:justify-end pb-3">
<div class="relative">
<img
loading="lazy"
class="relative max-w-[100px] w-full aspect-square"
src={imageSrc}
alt={prompt}
/>
<div class="absolute flex justify-around w-full">
{#each promptData.images as image, i}
<button
class="{seletecdImage === i
? 'bg-black dark:bg-white'
: 'bg-white dark:bg-black'} dark:bg-slate-300 rounded-full h-3 w-3 m-1 border border-black dark:border-white"
on:click={() => (seletecdImage = i)}
on:mousemove={() => (seletecdImage = i)}
/>
{/each}
</div>
</div>
</div>
<div
class="row-start-4 col-span-6 md:col-span-2 md:col-start-5 flex justify-center md:justify-end"
>
<div class="flex justify-center items-center">
<button
class="button"
title="Send this prompt to input so you can remix it"
on:click={() => dispatch('remix', { prompt })}
>
Remix
</button>
<button
class="button"
title="Copy all colors to clipboard"
disabled={isCopying}
on:click={() => copyStringToClipboard(colors.map((color) => color.formatHex()).join(', '))}
>
{isCopying ? 'Copied' : 'Copy'}
</button>
</div>
</div>
</div>
<style lang="postcss" scoped>
.button {
@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;
}
</style>
|