init

lib/components/bio/elements/Panel.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import Handle from '$lib/components/dashboard/editor/Handle.svelte';
+  import { editorStore } from '$lib/stores/editor';
+
+  export let preview: boolean = false;
+  export let handle: boolean = false;
+  export let fit: boolean = false;
+  export let full: boolean = false;
+  export let invisible: boolean = false;
+
+  $: hasHandle = handle ? $editorStore.editMode : false;
+</script>
+
+<div
+  class="panel flex-shrink-0 flex"
+  class:w-fit={fit}
+  class:w-full={full}
+  class:visible={!invisible}
+  class:widget-preview={preview}>
+  {#if hasHandle}
+    <Handle pad={true} />
+  {/if}
+  <div class="panel-content w-full h-fit min-w-0" class:!pl-0={hasHandle} class:-ml-6={hasHandle && invisible}>
+    <slot />
+  </div>
+</div>
+
+<style lang="postcss">
+  .panel.visible {
+    @apply bg-widget-fill rounded-3xl border border-widget-stroke backdrop-blur-xl transition-colors text-text-header transform-gpu;
+  }
+
+  .panel.visible .panel-content {
+    @apply p-6;
+  }
+</style>