Spaces:
Paused
Paused
File size: 1,570 Bytes
55bd140 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<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>
|