refac: images

src/lib/components/common/CodeEditorModal.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { onMount, getContext } from 'svelte';
+
+	import CodeEditor from './CodeEditor.svelte';
+	import Drawer from './Drawer.svelte';
+
+	const i18n = getContext('i18n');
+
+	let {
+		show = $bindable(),
+		value = $bindable(),
+		lang = 'python',
+		onChange = () => {},
+		onSave = () => {}
+	} = $props();
+
+	let boilerplate = ``;
+
+	let codeEditor = $state(null);
+	let _content = $state(value);
+
+	$effect(() => {
+		if (_content) {
+			value = _content;
+		}
+	});
+</script>
+
+<Drawer bind:show>
+	<div class="flex h-full flex-col">
+		<div
+			class=" sticky top-0 z-30 flex justify-between bg-white px-4.5 pt-3 pb-3 dark:bg-gray-900 dark:text-gray-100"
+		>
+			<div class=" font-primary self-center text-lg font-medium">
+				{$i18n.t('Code Editor')}
+			</div>
+			<button
+				class="self-center"
+				aria-label="Close"
+				onclick={() => {
+					show = false;
+				}}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+					class="h-5 w-5"
+				>
+					<path
+						d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+					/>
+				</svg>
+			</button>
+		</div>
+
+		<div
+			class="flex h-full w-full flex-1 flex-col md:flex-row md:space-x-4 dark:text-gray-200 overflow-y-auto"
+		>
+			<div class=" flex h-full w-full flex-col sm:flex-row sm:justify-center sm:space-x-6">
+				<CodeEditor bind:this={codeEditor} {value} {boilerplate} {lang} {onChange} {onSave} />
+			</div>
+		</div>
+	</div>
+</Drawer>

src/lib/components/common/Drawer.svelte

@@ -2,7 +2,6 @@
 	import { onDestroy, onMount } from 'svelte';
 	import { flyAndScale } from '$lib/utils/transitions';
 	import { fade, fly, slide } from 'svelte/transition';
-	import { isApp } from '$lib/stores';
 
 	export let show = false;
 	export let className = '';
@@ -54,26 +53,25 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-
-<div
-	bind:this={modalElement}
-	class="modal fixed right-0 {$isApp
-		? ' ml-[4.5rem] max-w-[calc(100%-4.5rem)]'
-		: ''} left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] flex justify-center z-999 overflow-hidden overscroll-contain"
-	in:fly={{ y: 100, duration: 100 }}
-	on:mousedown={() => {
-		show = false;
-	}}
->
+{#if show}
 	<div
-		class=" mt-auto w-full bg-gray-50 dark:bg-gray-900 dark:text-gray-100 {className} max-h-[100dvh] overflow-y-auto scrollbar-hidden"
-		on:mousedown={(e) => {
-			e.stopPropagation();
+		bind:this={modalElement}
+		class="modal fixed right-0 bottom-0 left-0 z-999 flex h-screen max-h-[100dvh] w-full justify-center overflow-hidden overscroll-contain bg-black/60"
+		in:fly={{ y: 100, duration: 100 }}
+		on:mousedown={() => {
+			show = false;
 		}}
 	>
-		<slot />
+		<div
+			class=" mt-auto w-full bg-gray-50 dark:bg-gray-900 dark:text-gray-100 {className} scrollbar-hidden max-h-[100dvh] overflow-y-auto"
+			on:mousedown={(e) => {
+				e.stopPropagation();
+			}}
+		>
+			<slot />
+		</div>
 	</div>
-</div>
+{/if}
 
 <style>
 	.modal-content {