50 lines
1.1 KiB
Svelte
50 lines
1.1 KiB
Svelte
<script>
|
|
export let is_open = false;
|
|
export let name_editable = false;
|
|
export let name = "";
|
|
export let class_name = "";
|
|
export let on_close = () => {};
|
|
</script>
|
|
|
|
<div
|
|
class="absolute top-0 w-full h-screen z-10
|
|
max-w-full max-h-full
|
|
flex justify-center items-center
|
|
backdrop-blur-sm
|
|
bg-[#00000022]
|
|
{is_open ? 'opacity-100 visible' : 'invisible opacity-0'}
|
|
transition-all duration-300"
|
|
>
|
|
<div
|
|
class="size-[700px] mx-4 flex flex-col
|
|
border-[var(--w-border)] dark:border-[var(--b-border)] border-2 rounded-xl
|
|
bg-[var(--w-bg)] dark:bg-[var(--b-bg)]
|
|
text-[var(--w-text)] dark:text-[var(--b-text)] text-2xl
|
|
overflow-y-auto
|
|
{class_name}"
|
|
>
|
|
<div
|
|
class="ml-2 relative flex flex-initial justify-between items-center"
|
|
>
|
|
{#if name_editable}
|
|
<input
|
|
type="text"
|
|
bind:value={name}
|
|
class="bg-[var(--bg)] w-full focus-visible:outline-none"
|
|
/>
|
|
{:else}
|
|
<p class="bg-[var(--bg)] w-full focus-visible:outline-none">
|
|
{name}
|
|
</p>
|
|
{/if}
|
|
<button
|
|
on:click={() => {
|
|
is_open = false;
|
|
on_close();
|
|
}}
|
|
class="size-[60px] m-2 text-[40px] pb-3">x</button
|
|
>
|
|
</div>
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|