frontend/src/lib/Menu.svelte

<script lang="ts">
	import { onMount, createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();

	const onKeyup = (e: KeyboardEvent) => {
		e.preventDefault();
		if (e.key === 'Enter') {
			dispatch('paintMode', { mode: 'paint' });
		}
	};
	onMount(() => {
		window.addEventListener('keyup', onKeyup);
		return () => {
			window.removeEventListener('keyup', onKeyup);
		};
	});
</script>

<div class="grid grid-cols-1 gap-3 w-max mx-auto">
	<!-- <div class="flex items-center">
		<input
			id="showframes"
			type="checkbox"
			bind:checked={$showFrames}
			class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer"
		/>
		<label for="showframes" class="text-white dark:text-white cursor-pointer ml-2">
			Show Frames
		</label>
	</div> -->
	<!-- <button class="button" title="Move" on:click={() => dispatch('paintMode', { mode: 'move' })}>
		Move
	</button> -->
	<button
		class="button-paint bg-violet-100 text-violet-900"
		title="New Paint Frame"
		on:click={() => dispatch('paintMode', { mode: 'paint' })}
	>
		<span
			class="rounded-sm h-6 w-6 flex justify-center items-center border-2 border-dashed border-violet-700 mr-2"
			>+</span
		>
		<span>Paint</span>
	</button>
</div>

<style lang="postcss" scoped>
	/* .button {
		@apply disabled:opacity-50 dark:bg-white dark:text-black bg-black text-white rounded-2xl text-xs shadow-sm focus:outline-none focus:border-gray-400;
	} */
	.button-paint {
		@apply flex justify-center items-center disabled:opacity-50  dark:bg-white dark:text-black rounded-2xl px-3 py-1 shadow-sm focus:outline-none focus:border-gray-400;
	}
</style>