57 lines
1.7 KiB
Svelte
57 lines
1.7 KiB
Svelte
<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>
|