init

lib/components/dashboard/modal/NavbarModal.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type Modal from '$lib/models/modal';
+  import { modalStore } from '$lib/stores/modal';
+  import { faChevronLeft, faSave, faTrashCan, faX } from '@fortawesome/free-solid-svg-icons';
+  import Fa from 'svelte-fa';
+  import Button from '../elements/Button.svelte';
+
+  export let title: string | undefined = undefined;
+  export let back: Modal | undefined = undefined;
+  export let saveFunc: void | (() => void) | undefined = undefined;
+  export let deleteFunc: void | (() => void) | undefined = undefined;
+
+  const dismissModal = () => {
+    $modalStore?.hideModal();
+  };
+</script>
+
+<div class="active-navbar-modal flex flex-col h-full -mx-4">
+  {#if title}
+    <div class="flex-shrink-0 h-16 flex justify-between items-center border-b border-widget-stroke">
+      {#if back}
+        <button on:click={() => (back ? $modalStore?.showModal(back) : null)}>
+          <Fa icon={faChevronLeft} />
+        </button>
+      {:else}
+        <div />
+      {/if}
+      <p class="w-full">{title}</p>
+      <button on:click={dismissModal}>
+        <Fa icon={faX} />
+      </button>
+    </div>
+  {/if}
+  <div class="flex-grow overflow-x-hidden overflow-y-auto px-4 pt-4">
+    <slot />
+  </div>
+  {#if saveFunc}
+    <div class="mx-4 mt-4 flex gap-2">
+      <Button full={true} icon={faSave} style="white" onClick={saveFunc}>Save</Button>
+      {#if deleteFunc}
+        <Button iconOnly={true} icon={faTrashCan} onClick={deleteFunc} />
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style lang="postcss">
+  div > div > button,
+  div > div > div {
+    @apply text-text-clickable hover:text-text-primary transition-colors active:text-text-secondary w-[60px] h-12;
+  }
+
+  div > div > button,
+  div > div > p {
+    @apply flex items-center justify-center;
+  }
+</style>