2023-04-12 18:37:52 +03:00
|
|
|
<script lang="ts">
|
2023-07-01 00:50:47 -04:00
|
|
|
import empty1Url from '$lib/assets/empty-1.svg';
|
2023-04-12 18:37:52 +03:00
|
|
|
|
2023-07-01 00:50:47 -04:00
|
|
|
export let actionHandler: undefined | (() => Promise<void>) = undefined;
|
|
|
|
export let text = '';
|
|
|
|
export let alt = '';
|
2023-04-12 18:37:52 +03:00
|
|
|
|
2023-07-01 00:50:47 -04:00
|
|
|
let hoverClasses = 'hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer';
|
2023-04-12 18:37:52 +03:00
|
|
|
</script>
|
|
|
|
|
|
|
|
{#if actionHandler}
|
2023-07-15 20:13:04 -05:00
|
|
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
2023-07-01 00:50:47 -04:00
|
|
|
<div
|
|
|
|
on:click={actionHandler}
|
|
|
|
on:keydown={actionHandler}
|
2023-07-18 13:19:39 -05:00
|
|
|
class="border dark:border-immich-dark-gray {hoverClasses} m-auto mt-10 flex w-[50%] flex-col place-content-center place-items-center rounded-3xl bg-gray-50 p-5 dark:bg-immich-dark-gray"
|
2023-07-01 00:50:47 -04:00
|
|
|
>
|
|
|
|
<img src={empty1Url} {alt} width="500" draggable="false" />
|
2023-07-18 13:19:39 -05:00
|
|
|
<p class="text-immich-text-gray-500 text-center dark:text-immich-dark-fg">{text}</p>
|
2023-07-01 00:50:47 -04:00
|
|
|
</div>
|
2023-04-12 18:37:52 +03:00
|
|
|
{:else}
|
2023-07-01 00:50:47 -04:00
|
|
|
<div
|
2023-07-18 13:19:39 -05:00
|
|
|
class="m-auto mt-10 flex w-[50%] flex-col place-content-center place-items-center rounded-3xl border bg-gray-50 p-5 dark:border-immich-dark-gray dark:bg-immich-dark-gray"
|
2023-07-01 00:50:47 -04:00
|
|
|
>
|
|
|
|
<img src={empty1Url} {alt} width="500" draggable="false" />
|
2023-07-18 13:19:39 -05:00
|
|
|
<p class="text-immich-text-gray-500 text-center dark:text-immich-dark-fg">{text}</p>
|
2023-07-01 00:50:47 -04:00
|
|
|
</div>
|
2023-04-12 18:37:52 +03:00
|
|
|
{/if}
|