32 lines
1.1 KiB
Svelte
32 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { clamp } from '$lib/utils';
|
|
import Spinner from '../elements/Spinner.svelte';
|
|
|
|
export let fetchingPreview: boolean | undefined = undefined;
|
|
export let scaleFactor: number = 1.0;
|
|
</script>
|
|
|
|
<div class="relative h-80 overflow-hidden -mt-4 -mx-4 p-4 border-b border-widget-stroke">
|
|
<div
|
|
class="relative widget-preview-container h-72 select-none flex justify-center items-center transition-opacity opacity-100"
|
|
class:opacity-60={fetchingPreview}>
|
|
<div
|
|
class="relative widget flex justify-center items-center pointer-events-none"
|
|
style="--scale: {clamp(scaleFactor, 0, 1) ?? 1.0}">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="absolute top-0 left-0 bottom-0 right-0 flex justify-center items-center pointer-events-none transition-opacity opacity-0"
|
|
class:opacity-100={fetchingPreview}>
|
|
<div class="relative w-12 h-12 flex justify-center items-center bg-black/40 rounded-lg">
|
|
<Spinner />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="postcss">
|
|
.widget {
|
|
transform: scale(var(--scale, 1));
|
|
}
|
|
</style>
|