bretton.dev
Coves frontend - a photon fork
1<script lang="ts">
2 import { t } from '$lib/app/i18n'
3 import { Label } from 'mono-svelte'
4 import { DocumentPlus, Icon, Plus } from 'svelte-hero-icons/dist'
5 import ImageInputModal from './ImageInputModal.svelte'
6
7 let {
8 imageUrl: passedImageUrl = $bindable(),
9 label,
10 }: {
11 imageUrl?: string
12 label?: string
13 } = $props()
14
15 let imageUrl = $derived(passedImageUrl)
16
17 let open = $state(false)
18</script>
19
20<div>
21 <Label>{label}</Label>
22
23 <button
24 class={[
25 'flex flex-col items-center justify-center px-8 py-4 mx-auto w-full rounded-xl',
26 'border border-slate-200 dark:border-zinc-800 border-dashed hover:border-slate-300 hover:dark:border-zinc-700',
27 'cursor-pointer min-h-36 transition-colors bg-white dark:bg-zinc-950 relative',
28 ]}
29 type="button"
30 onclick={() => (open = !open)}
31 >
32 {#if imageUrl}
33 <div>
34 <Icon
35 src={Plus}
36 class="text-slate-400 dark:text-zinc-500 absolute top-0 left-0 m-2"
37 size="20"
38 micro
39 />
40 </div>
41 <img src={imageUrl} alt="" class="rounded-md mx-auto h-full" />
42 {:else}
43 <Icon
44 src={DocumentPlus}
45 class="text-slate-400 dark:text-zinc-500"
46 size="36"
47 solid
48 />
49 <p class="text-slate-600 dark:text-zinc-400 font-medium">
50 {$t('common.attach')}
51 </p>
52 {/if}
53 <ImageInputModal bind:open bind:imageUrl={passedImageUrl} />
54 </button>
55</div>