init

src/lib/Dialog.svelte

@@ -0,0 +1,50 @@
+<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>