mirror of
https://github.com/aleksilassila/reiverr.git
synced 2026-04-21 08:15:12 +02:00
35 lines
907 B
Svelte
35 lines
907 B
Svelte
<script lang="ts">
|
|
import classNames from 'classnames';
|
|
import Container from './Container.svelte';
|
|
import type { Readable } from 'svelte/store';
|
|
import AnimateScale from './AnimateScale.svelte';
|
|
import type { ComponentType } from 'svelte';
|
|
import IconOverlay from './IconOverlay.svelte';
|
|
|
|
export let url: string;
|
|
export let icon: ComponentType | undefined = undefined;
|
|
export let focusOnMount = false;
|
|
let hasFocus: Readable<boolean>;
|
|
</script>
|
|
|
|
<AnimateScale hasFocus={$hasFocus}>
|
|
<Container
|
|
bind:hasFocus
|
|
class={classNames(
|
|
'w-40 h-40 rounded-xl overflow-hidden cursor-pointer relative',
|
|
{
|
|
selected: $hasFocus,
|
|
unselected: !$hasFocus
|
|
},
|
|
$$restProps.class
|
|
)}
|
|
{focusOnMount}
|
|
on:clickOrSelect
|
|
>
|
|
<div class="bg-center bg-cover w-full h-full" style={`background-image: url('${url}')`} />
|
|
{#if icon}
|
|
<IconOverlay {icon} />
|
|
{/if}
|
|
</Container>
|
|
</AnimateScale>
|