immich/web/src/lib/components/shared-components/empty-placeholder.svelte
Alex d5b96c0257
chore(web): Update to Svelte 4 (#3196)
* trying to update to svelte 4

* update dependencies

* remove global transition

* suppress wrning

* chore: install from github

* revert material icon change

* Supress a11y warning

* update

* remove coverage test on web

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
2023-07-15 20:13:04 -05:00

28 lines
1.2 KiB
Svelte

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