Initial commit0.1.0

1 files changed, 42 insertions, 0 deletions

diff --git a/frontend/src/lib/toolbar/Toolbar.svelte b/frontend/src/lib/toolbar/Toolbar.svelte
new file mode 100644
index 0000000..e87d731
--- /dev/null
+++ b/frontend/src/lib/toolbar/Toolbar.svelte
@@ -0,0 +1,42 @@
+<script lang="ts" context="module">
+	import { writable, type Writable } from 'svelte/store';
+
+	interface ToolbarContext {
+		expand: boolean;
+	}
+
+	function initToolbarContext() {
+		return setContext<Writable<ToolbarContext>>('toolbar', writable({ expand: false }));
+	}
+
+	export function getToolbarContext() {
+		return getContext<Writable<ToolbarContext>>('toolbar');
+	}
+</script>
+
+<script lang="ts">
+	import { getContext, setContext } from 'svelte';
+
+	const toolbar = initToolbarContext();
+</script>
+
+<div class="flex flex-col">
+	<div
+		class="flex flex-row flex-wrap gap-4 text-sm xl:grid xl:grid-flow-col xl:grid-cols-[1fr_2fr_1fr]"
+	>
+		<div class="flex flex-row justify-start gap-2">
+			<slot name="start" />
+		</div>
+		<div class="flex flex-row flex-wrap justify-start gap-2 xl:flex-nowrap xl:justify-center">
+			<slot name="center" />
+		</div>
+		<div class="flex flex-row justify-end gap-2">
+			<slot name="end" />
+		</div>
+	</div>
+	{#if $toolbar.expand}
+		<div class="mt-4">
+			<slot />
+		</div>
+	{/if}
+</div>