init

lib/components/bio/elements/InteractivePanel.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { editorStore } from '$lib/stores/editor';
+  import { faExternalLink } from '@fortawesome/free-solid-svg-icons';
+  import Fa from 'svelte-fa';
+  import Panel from './Panel.svelte';
+
+  export let preview: boolean = false;
+  export let handle: boolean = false;
+  export let url: string | undefined = undefined;
+  export let title: string | undefined = undefined;
+</script>
+
+<a
+  class="panel cursor-pointer rounded-3xl hover:bg-dark-hover-ui-element-bg/50 dark:hover:bg-light-hover-ui-element-bg/50 active:bg-dark-active-ui-element-bg/50 dark:active:bg-light-active-ui-element-bg/50 transition-colors box-content"
+  href={!$editorStore.editMode ? url : undefined}
+  target="_blank">
+  <Panel {handle} {preview}>
+    <div class="flex gap-1" class:title>
+      <div class="flex-grow" class:min-w-0={!title}>
+        <slot />
+      </div>
+      <div class="contents text-text-clickable text-xs">
+        {#if title}
+          <p class="whitespace-nowrap leading-[.8] text-base font-normal">{title}</p>
+        {/if}
+        <Fa icon={faExternalLink} />
+      </div>
+    </div>
+  </Panel>
+</a>
+
+<style lang="postcss">
+  div.title {
+    @apply flex-col-reverse gap-0;
+  }
+
+  div.title > div:last-of-type {
+    @apply flex w-full justify-between items-center mb-5;
+  }
+</style>