init

lib/components/dashboard/editor/WidgetPreviewContainer.svelte

@@ -0,0 +1,32 @@
+<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>